/*
 * 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:
        radial-gradient(circle, color-mix(in srgb, var(--texture-ink) 3%, transparent) 0 .7px, transparent 1.2px),
        radial-gradient(circle, color-mix(in srgb, var(--texture-accent) 2.4%, transparent) 0 .6px, transparent 1.1px);
    --surface-texture-size: 54px 54px, 73px 73px;
    --surface-texture-position: 0 0, 17px 13px;
}

.surface-texture-paper {
    --surface-texture-image:
        radial-gradient(circle, color-mix(in srgb, var(--texture-ink) 2.8%, transparent) 0 .65px, transparent 1.15px),
        radial-gradient(circle, color-mix(in srgb, var(--texture-accent) 2.2%, transparent) 0 .55px, transparent 1.05px);
    --surface-texture-size: 48px 48px, 67px 67px;
    --surface-texture-position: 0 0, 19px 11px;
}

.surface-texture-rings {
    --surface-texture-image:
        repeating-radial-gradient(ellipse at 0 100%, transparent 0 42px, color-mix(in srgb, var(--texture-ink) 2.5%, transparent) 43px 44px);
    --surface-texture-size: 124px 104px;
    --surface-texture-position: 0 0;
}

.surface-texture-petals {
    --surface-texture-image:
        radial-gradient(ellipse at 28% 34%, color-mix(in srgb, var(--texture-accent) 8%, transparent) 0 3px, transparent 4px),
        radial-gradient(ellipse at 70% 65%, color-mix(in srgb, var(--texture-ink) 4%, transparent) 0 2px, transparent 3px);
    --surface-texture-size: 88px 78px, 104px 92px;
    --surface-texture-position: 0 0, 19px 14px;
}

.surface-texture-stars {
    --surface-texture-image:
        radial-gradient(circle, color-mix(in srgb, var(--texture-accent) 25%, transparent) 0 1px, transparent 1.5px),
        radial-gradient(circle, color-mix(in srgb, var(--texture-ink) 8%, transparent) 0 1px, transparent 1.5px);
    --surface-texture-size: 54px 54px, 72px 72px;
    --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) 7%, transparent), transparent 43%),
        radial-gradient(ellipse at 92% 72%, color-mix(in srgb, var(--texture-ink) 4%, transparent), transparent 48%),
        radial-gradient(circle at 48% 42%, color-mix(in srgb, var(--texture-accent) 2%, transparent), transparent 36%);
    --surface-texture-size: auto, auto, 240px 190px;
    --surface-texture-position: 0 0, 0 0, 31px 17px;
}

.surface-texture-ink {
    --surface-texture-image:
        radial-gradient(ellipse, color-mix(in srgb, var(--texture-ink) 2.2%, transparent) 0 .7px, transparent 1.3px),
        radial-gradient(circle at 84% 12%, color-mix(in srgb, var(--texture-accent) 5%, transparent), transparent 32%);
    --surface-texture-size: 62px 48px, auto;
    --surface-texture-position: 0 0, 0 0;
}

.surface-texture-waves {
    --surface-texture-image:
        repeating-radial-gradient(ellipse at 0 100%, transparent 0 40px, color-mix(in srgb, var(--texture-ink) 2.5%, transparent) 41px 42px);
    --surface-texture-size: 132px 92px;
    --surface-texture-position: 0 0;
}

.surface-texture-linen {
    --surface-texture-image:
        radial-gradient(ellipse, color-mix(in srgb, var(--texture-ink) 2.2%, transparent) 0 .6px, transparent 1.2px),
        radial-gradient(ellipse, color-mix(in srgb, var(--texture-accent) 1.8%, transparent) 0 .5px, transparent 1.1px);
    --surface-texture-size: 34px 47px, 51px 39px;
    --surface-texture-position: 0 0, 13px 9px;
}

.surface-texture-dots {
    --surface-texture-image:
        radial-gradient(circle, color-mix(in srgb, var(--texture-ink) 4%, transparent) 0 1px, transparent 1.6px),
        radial-gradient(circle, color-mix(in srgb, var(--texture-accent) 3%, transparent) 0 1px, transparent 1.6px);
    --surface-texture-size: 30px 30px, 42px 42px;
    --surface-texture-position: 0 0, 11px 9px;
}

.surface-texture-lattice {
    --surface-texture-image:
        radial-gradient(circle, color-mix(in srgb, var(--texture-ink) 3%, transparent) 0 .8px, transparent 1.4px),
        radial-gradient(circle, color-mix(in srgb, var(--texture-accent) 2.4%, transparent) 0 .7px, transparent 1.3px);
    --surface-texture-size: 46px 46px, 64px 64px;
    --surface-texture-position: 0 0, 19px 17px;
}

.surface-texture-terrazzo {
    --surface-texture-image:
        radial-gradient(ellipse at 22% 28%, color-mix(in srgb, var(--texture-accent) 7%, transparent) 0 2px, transparent 3px),
        radial-gradient(ellipse at 73% 64%, color-mix(in srgb, var(--texture-ink) 4%, transparent) 0 1px, transparent 2px),
        radial-gradient(ellipse at 44% 76%, color-mix(in srgb, var(--texture-accent) 2.8%, transparent) 0 1.2px, transparent 2px);
    --surface-texture-size: 68px 60px, 82px 72px, 92px 84px;
    --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) 7%, transparent), transparent 42%),
        radial-gradient(ellipse at 86% 76%, color-mix(in srgb, var(--texture-ink) 4%, 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) 2%, transparent) 25%, transparent 25%),
        linear-gradient(225deg, color-mix(in srgb, var(--texture-accent) 2%, transparent) 25%, transparent 25%),
        linear-gradient(315deg, color-mix(in srgb, var(--texture-ink) 1.5%, transparent) 25%, transparent 25%);
    --surface-texture-size: 48px 48px, 48px 48px, 48px 48px;
    --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) 6%, transparent) 0 4px, transparent 5px),
        radial-gradient(ellipse at 63% 31%, color-mix(in srgb, var(--texture-ink) 3%, transparent) 0 3px, transparent 4px),
        radial-gradient(ellipse at 42% 72%, color-mix(in srgb, var(--texture-ink) 2%, transparent) 0 2px, transparent 3px);
    --surface-texture-size: 90px 74px, 104px 90px, 128px 112px;
    --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) 9%, transparent) 0 1.5px, transparent 2.4px),
        radial-gradient(ellipse, color-mix(in srgb, var(--texture-ink) 3%, transparent) 0 1px, transparent 1.8px);
    --surface-texture-size: 50px 50px, 68px 68px;
    --surface-texture-position: 0 0, 17px 13px;
}

.surface-texture-breeze {
    --surface-texture-image:
        radial-gradient(ellipse at 72% 34%, color-mix(in srgb, var(--texture-accent) 3%, transparent), transparent 44%),
        radial-gradient(ellipse at 18% 22%, color-mix(in srgb, var(--texture-ink) 3%, transparent), transparent 42%);
    --surface-texture-size: 126px 104px, 220px 160px;
    --surface-texture-position: 0 0, 14px 9px;
}

.surface-texture-sprigs {
    --surface-texture-image:
        radial-gradient(ellipse at 35% 28%, color-mix(in srgb, var(--texture-accent) 6%, transparent) 0 3px, transparent 4px),
        radial-gradient(ellipse at 62% 61%, color-mix(in srgb, var(--texture-ink) 3%, transparent) 0 2px, transparent 3px),
        radial-gradient(ellipse at 19% 78%, color-mix(in srgb, var(--texture-ink) 2%, transparent) 0 2px, transparent 3px);
    --surface-texture-size: 86px 74px, 94px 82px, 142px 120px;
    --surface-texture-position: 0 0, 18px 13px, 0 0;
}

.surface-texture-ripple {
    --surface-texture-image:
        repeating-radial-gradient(circle at 18% 42%, transparent 0 18px, color-mix(in srgb, var(--texture-accent) 3%, transparent) 19px 20px, transparent 21px 39px),
        radial-gradient(circle at 76% 24%, color-mix(in srgb, var(--texture-ink) 3.5%, transparent) 0 1.5px, transparent 2.5px);
    --surface-texture-size: 116px 92px, 96px 84px;
    --surface-texture-position: 0 0, 21px 15px;
}

.surface-texture-gingham {
    --surface-texture-image:
        radial-gradient(circle, color-mix(in srgb, var(--texture-accent) 2.8%, transparent) 0 1.2px, transparent 1.8px),
        radial-gradient(circle, color-mix(in srgb, var(--texture-ink) 2%, transparent) 0 .8px, transparent 1.4px);
    --surface-texture-size: 58px 58px, 82px 82px;
    --surface-texture-position: 0 0, 23px 19px;
}

.surface-texture-citrus {
    --surface-texture-image:
        radial-gradient(circle at 18% 22%, transparent 0 5px, color-mix(in srgb, var(--texture-accent) 6%, transparent) 6px 7px, transparent 8px),
        radial-gradient(circle at 73% 66%, color-mix(in srgb, var(--texture-ink) 3%, transparent) 0 1.5px, transparent 2.5px),
        radial-gradient(circle at 44% 42%, color-mix(in srgb, var(--texture-accent) 2%, transparent) 0 1px, transparent 2px);
    --surface-texture-size: 78px 72px, 94px 84px, 136px 116px;
    --surface-texture-position: 0 0, 17px 11px, 0 0;
}

.surface-texture-cloudlets {
    --surface-texture-image:
        radial-gradient(ellipse at 18% 32%, color-mix(in srgb, var(--texture-accent) 5%, transparent) 0 10px, transparent 11px),
        radial-gradient(ellipse at 64% 61%, color-mix(in srgb, var(--texture-ink) 3%, transparent) 0 12px, transparent 13px),
        radial-gradient(ellipse at 42% 48%, color-mix(in srgb, var(--texture-accent) 1.8%, transparent), transparent 64%);
    --surface-texture-size: 132px 92px, 158px 108px, 230px 166px;
    --surface-texture-position: 0 0, 27px 18px, 0 0;
}

/*
 * “白勺奶霜”页头专属纹理：用稀疏的蕾丝弧、花心与柔光模拟兜帽滚边。
 * 图形保持低对比且不使用贯穿页面的直线，避免干扰品牌标题与简介文字。
 */
.surface-texture-baishao-lace {
    --surface-texture-image:
        radial-gradient(circle at 18px 3px, transparent 0 10px, color-mix(in srgb, var(--texture-ink) 5.5%, transparent) 10.5px 11.5px, transparent 12px),
        radial-gradient(circle at 54px 3px, transparent 0 10px, color-mix(in srgb, var(--texture-accent) 7%, transparent) 10.5px 11.5px, transparent 12px),
        radial-gradient(circle at 36px 25px, color-mix(in srgb, var(--texture-accent) 7%, transparent) 0 1.7px, transparent 2.4px),
        radial-gradient(ellipse at 84% 18%, color-mix(in srgb, var(--texture-accent) 5%, transparent), transparent 38%);
    --surface-texture-size: 72px 44px, 72px 44px, 72px 44px, auto;
    --surface-texture-position: 0 1px, 0 1px, 0 0, 0 0;
}

/*
 * “白勺奶霜”页脚专属纹理：由一个柔和掌垫、三枚趾印和错位小花瓣组成。
 * 大间距与较低不透明度让图案只承担收尾装饰，不与联系信息争夺注意力。
 */
.surface-texture-baishao-paws {
    --surface-texture-image:
        radial-gradient(ellipse at 50% 66%, color-mix(in srgb, var(--texture-accent) 6.5%, transparent) 0 4px, transparent 4.9px),
        radial-gradient(circle at 42% 44%, color-mix(in srgb, var(--texture-ink) 5%, transparent) 0 2px, transparent 2.8px),
        radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--texture-ink) 5%, transparent) 0 2.1px, transparent 2.9px),
        radial-gradient(circle at 58% 44%, color-mix(in srgb, var(--texture-ink) 5%, transparent) 0 2px, transparent 2.8px),
        radial-gradient(ellipse at 78% 24%, color-mix(in srgb, var(--texture-accent) 4.5%, transparent) 0 2.4px, transparent 3.2px);
    --surface-texture-size: 148px 96px, 148px 96px, 148px 96px, 148px 96px, 126px 88px;
    --surface-texture-position: 0 0, 0 0, 0 0, 0 0, 29px 17px;
}