/*
 * SmartCat 多表面 CSS 纹理库。
 * 纹理类只提供背景图层变量，由页面、页头、导航、卡片和页脚各自叠加到
 * 原有渐变之上。颜色从所在表面的 --texture-ink / --texture-accent 继承，
 * 因此同一纹理可以安全适配深色与浅色配色。
 */
:root {
    --texture-ink: currentColor;
    --texture-accent: currentColor;
    --surface-texture-image: linear-gradient(transparent, transparent);
    --surface-texture-size: auto;
    --surface-texture-position: 0 0;
}

.surface-texture-none {
    --surface-texture-image: linear-gradient(transparent, transparent);
    --surface-texture-size: auto;
    --surface-texture-position: 0 0;
}

.surface-texture-grid {
    --surface-texture-image:
        linear-gradient(color-mix(in srgb, var(--texture-ink) 7%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--texture-ink) 7%, transparent) 1px, transparent 1px);
    --surface-texture-size: 30px 30px, 30px 30px;
    --surface-texture-position: 0 0, 0 0;
}

.surface-texture-paper {
    --surface-texture-image:
        repeating-linear-gradient(0deg, color-mix(in srgb, var(--texture-ink) 4.5%, transparent) 0 1px, transparent 1px 6px),
        radial-gradient(circle, color-mix(in srgb, var(--texture-accent) 10%, transparent) 0 1px, transparent 1.8px);
    --surface-texture-size: auto, 23px 23px;
    --surface-texture-position: 0 0, 7px 4px;
}

.surface-texture-rings {
    --surface-texture-image:
        repeating-radial-gradient(ellipse at 0 100%, transparent 0 31px, color-mix(in srgb, var(--texture-ink) 7%, transparent) 32px 34px);
    --surface-texture-size: 96px 82px;
    --surface-texture-position: 0 0;
}

.surface-texture-petals {
    --surface-texture-image:
        radial-gradient(ellipse at 28% 34%, color-mix(in srgb, var(--texture-accent) 15%, transparent) 0 4px, transparent 5px),
        radial-gradient(ellipse at 70% 65%, color-mix(in srgb, var(--texture-ink) 8%, transparent) 0 3px, transparent 4px);
    --surface-texture-size: 72px 64px, 86px 75px;
    --surface-texture-position: 0 0, 19px 14px;
}

.surface-texture-stars {
    --surface-texture-image:
        radial-gradient(circle, color-mix(in srgb, var(--texture-accent) 34%, transparent) 0 1px, transparent 1.6px),
        radial-gradient(circle, color-mix(in srgb, var(--texture-ink) 13%, transparent) 0 1px, transparent 1.5px);
    --surface-texture-size: 44px 44px, 59px 59px;
    --surface-texture-position: 0 0, 17px 22px;
}

.surface-texture-aurora {
    --surface-texture-image:
        radial-gradient(ellipse at 8% 18%, color-mix(in srgb, var(--texture-accent) 19%, transparent), transparent 43%),
        radial-gradient(ellipse at 92% 72%, color-mix(in srgb, var(--texture-ink) 11%, transparent), transparent 48%),
        linear-gradient(118deg, transparent 20%, color-mix(in srgb, var(--texture-accent) 7%, transparent) 49%, transparent 77%);
    --surface-texture-size: auto, auto, auto;
    --surface-texture-position: 0 0, 0 0, 0 0;
}

.surface-texture-ink {
    --surface-texture-image:
        repeating-linear-gradient(125deg, transparent 0 16px, color-mix(in srgb, var(--texture-ink) 5%, transparent) 17px 18px),
        radial-gradient(circle at 84% 12%, color-mix(in srgb, var(--texture-accent) 10%, transparent), transparent 32%);
    --surface-texture-size: auto, auto;
    --surface-texture-position: 0 0, 0 0;
}

.surface-texture-waves {
    --surface-texture-image:
        repeating-radial-gradient(ellipse at 0 100%, transparent 0 31px, color-mix(in srgb, var(--texture-ink) 7%, transparent) 32px 34px);
    --surface-texture-size: 104px 72px;
    --surface-texture-position: 0 0;
}

.surface-texture-linen {
    --surface-texture-image:
        repeating-linear-gradient(0deg, color-mix(in srgb, var(--texture-ink) 4%, transparent) 0 1px, transparent 1px 4px),
        repeating-linear-gradient(90deg, color-mix(in srgb, var(--texture-accent) 4%, transparent) 0 1px, transparent 1px 5px);
    --surface-texture-size: auto, auto;
    --surface-texture-position: 0 0, 0 0;
}

.surface-texture-dots {
    --surface-texture-image:
        radial-gradient(circle, color-mix(in srgb, var(--texture-ink) 9%, transparent) 0 1.2px, transparent 1.7px),
        radial-gradient(circle, color-mix(in srgb, var(--texture-accent) 8%, transparent) 0 1px, transparent 1.6px);
    --surface-texture-size: 22px 22px, 31px 31px;
    --surface-texture-position: 0 0, 11px 9px;
}

.surface-texture-lattice {
    --surface-texture-image:
        repeating-linear-gradient(45deg, transparent 0 15px, color-mix(in srgb, var(--texture-ink) 5.5%, transparent) 16px 17px),
        repeating-linear-gradient(-45deg, transparent 0 15px, color-mix(in srgb, var(--texture-accent) 5%, transparent) 16px 17px);
    --surface-texture-size: 32px 32px, 32px 32px;
    --surface-texture-position: 0 0, 0 0;
}

.surface-texture-terrazzo {
    --surface-texture-image:
        radial-gradient(ellipse at 22% 28%, color-mix(in srgb, var(--texture-accent) 13%, transparent) 0 3px, transparent 4px),
        radial-gradient(ellipse at 73% 64%, color-mix(in srgb, var(--texture-ink) 8%, transparent) 0 2px, transparent 3px),
        linear-gradient(38deg, transparent 47%, color-mix(in srgb, var(--texture-accent) 7%, transparent) 48% 52%, transparent 53%);
    --surface-texture-size: 54px 48px, 67px 59px, 71px 65px;
    --surface-texture-position: 0 0, 13px 17px, 29px 7px;
}

.surface-texture-mist {
    --surface-texture-image:
        radial-gradient(ellipse at 8% 18%, color-mix(in srgb, var(--texture-accent) 14%, transparent), transparent 42%),
        radial-gradient(ellipse at 86% 76%, color-mix(in srgb, var(--texture-ink) 8%, transparent), transparent 46%);
    --surface-texture-size: auto, auto;
    --surface-texture-position: 0 0, 0 0;
}

.surface-texture-facets {
    --surface-texture-image:
        linear-gradient(135deg, color-mix(in srgb, var(--texture-ink) 5%, transparent) 25%, transparent 25%),
        linear-gradient(225deg, color-mix(in srgb, var(--texture-accent) 5%, transparent) 25%, transparent 25%),
        linear-gradient(315deg, color-mix(in srgb, var(--texture-ink) 4%, transparent) 25%, transparent 25%);
    --surface-texture-size: 36px 36px, 36px 36px, 36px 36px;
    --surface-texture-position: 0 0, 18px 0, 18px 18px;
}

.surface-texture-botanical {
    --surface-texture-image:
        radial-gradient(ellipse at 18% 58%, color-mix(in srgb, var(--texture-accent) 12%, transparent) 0 5px, transparent 6px),
        radial-gradient(ellipse at 63% 31%, color-mix(in srgb, var(--texture-ink) 7%, transparent) 0 4px, transparent 5px),
        repeating-linear-gradient(62deg, transparent 0 28px, color-mix(in srgb, var(--texture-ink) 4%, transparent) 29px 30px);
    --surface-texture-size: 70px 58px, 82px 71px, 96px 84px;
    --surface-texture-position: 0 0, 23px 12px, 0 0;
}

.surface-texture-confetti {
    --surface-texture-image:
        radial-gradient(circle, color-mix(in srgb, var(--texture-accent) 16%, transparent) 0 2px, transparent 2.8px),
        linear-gradient(35deg, transparent 46%, color-mix(in srgb, var(--texture-ink) 7%, transparent) 47% 53%, transparent 54%);
    --surface-texture-size: 38px 38px, 51px 51px;
    --surface-texture-position: 0 0, 17px 13px;
}