/* ============================================================
 * 红豆商城 · 共享设计令牌（theme-tokens）
 * ------------------------------------------------------------
 * 入口页 / 与商城 /shop/ 共用同一份令牌，避免两处各存一套而走样。
 * 内容：① 基础层（字体/圆角/动效/语义色，与皮肤无关）
 *       ② 皮肤层 glass / sakura / neon（:root[data-skin]）
 *       ③ 通用暗色层 + 三套皮肤的暗色微调
 * 另外 4 套新皮肤（isekai / aurora / manga / prism）在 isekai.css
 * 与 themes-v39.css 中定义，加载顺序放在本文件之后即可。
 *
 * 注意：基础层的 :root 不带颜色令牌——颜色一律由 [data-skin] 提供，
 * 因此新增皮肤必须完整定义全部颜色变量，否则会回退到初始值。
 * ============================================================ */

/* ==================== 1. 设计令牌 ==================== */
/* 基础层：只放「与皮肤无关」的东西——字体、圆角、动效、布局尺寸、语义色。
 * 颜色一律走下面的 [data-skin] 覆盖层，切换皮肤时零 JS 参与。 */
:root {
    /* 字体 */
    --font-sans: "PingFang SC", "HarmonyOS Sans SC", "Hiragino Sans GB",
                 "Source Han Sans SC", "Noto Sans SC", "Microsoft YaHei",
                 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas,
                 "Liberation Mono", "Courier New", monospace;
    /* 宋体族：只用于商品标题与价格等大字号，小字仍走黑体保证可读性 */
    --font-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong",
                  "SimSun", "Noto Serif", Georgia, serif;

    /* 圆角：整体放大，配合毛玻璃 */
    --r-xs: 10px;
    --r-sm: 12px;
    --r-md: 16px;
    --r-lg: 20px;
    --r-xl: 26px;
    --r-pill: 999px;

    /* 动效 */
    --ease: cubic-bezier(.22, .61, .36, 1);
    --dur: .18s;

    /* 布局 */
    --wrap: 1180px;
    --nav-h: 60px;

    /* 语义色（亮暗态各有一份，走 [data-theme] 覆盖） */
    --ok:           #12A67A;
    --ok-soft:      #E4F7F0;
    --warn:         #B7791F;
    --warn-soft:    #FDF3E2;
    --danger:       #D6456B;
    --danger-soft:  #FDECF1;
    --info:         #4F6BEF;
    --info-soft:    #EBEFFE;
}


/* ---------- 皮肤 1：液态玻璃（acg-faka 原味，默认） ----------
 * 中性石板主色 + 云雾白玻璃 + 粉彩雾壁纸；配色克制，主打玻璃质感。 */
:root[data-skin="glass"] {
    --paper:        #EEF1F6;
    --surface:      rgba(255, 255, 255, .68);
    --surface-2:    rgba(255, 255, 255, .52);
    --surface-3:    rgba(240, 243, 249, .82);
    --glass-bg:     rgba(255, 255, 255, .68);
    --glass-bg-2:   rgba(255, 255, 255, .50);
    --glass-filter: saturate(105%) blur(24px);
    --glass-filter-strong: saturate(110%) blur(32px);

    --ink:          #1F2733;
    --ink-2:        #58606E;
    --ink-3:        #8B909E;
    --ink-4:        #B4B9C4;

    --line:         rgba(255, 255, 255, .85);
    --line-2:       rgba(31, 39, 51, .12);

    --accent:       #2A3B52;
    --accent-2:     #4C96E0;
    --accent-3:     #7FD1E8;
    --accent-ink:   #4C96E0;
    --accent-soft:  rgba(76, 150, 224, .12);
    --accent-ring:  rgba(76, 150, 224, .22);

    --halo-pink:    rgba(255, 190, 205, .30);
    --halo-violet:  rgba(150, 175, 225, .28);
    --halo-cyan:    rgba(140, 220, 235, .26);
    --grad-cta:     linear-gradient(100deg, #2A3B52 0%, #4C96E0 100%);
    --grad-halo:    radial-gradient(circle at 16% -8%, rgba(255,190,205,.34) 0, transparent 55%),
                    radial-gradient(circle at 86% 6%,  rgba(150,175,225,.30) 0, transparent 55%),
                    radial-gradient(circle at 52% 104%, rgba(140,220,235,.26) 0, transparent 60%);

    --sh-1: 0 1px 2px rgba(31, 45, 70, .06), 0 2px 6px rgba(31, 45, 70, .05);
    --sh-2: 0 6px 22px rgba(31, 45, 70, .10), 0 1px 3px rgba(31, 45, 70, .06);
    --sh-3: 0 24px 64px rgba(31, 45, 70, .18), 0 2px 8px rgba(31, 45, 70, .08);
}

/* ---------- 皮肤 2：樱雪琉璃（v35 沿用） ---------- */
:root[data-skin="sakura"] {
    --paper:        #FBF9FE;
    --surface:      rgba(255, 255, 255, .72);
    --surface-2:    rgba(255, 255, 255, .55);
    --surface-3:    rgba(246, 244, 255, .80);
    --glass-bg:     rgba(255, 255, 255, .68);
    --glass-bg-2:   rgba(255, 255, 255, .50);
    --glass-filter: saturate(140%) blur(20px);
    --glass-filter-strong: saturate(150%) blur(28px);

    --ink:          #2B2438;
    --ink-2:        #5B5170;
    --ink-3:        #8B82A3;
    --ink-4:        #B5ADC8;

    --line:         rgba(255, 255, 255, .85);
    --line-2:       rgba(167, 139, 250, .18);

    --accent:       #FF6FA5;
    --accent-2:     #A78BFA;
    --accent-3:     #67E8F9;
    --accent-ink:   #E0407F;
    --accent-soft:  rgba(255, 111, 165, .12);
    --accent-ring:  rgba(255, 111, 165, .22);

    --halo-pink:    rgba(255, 143, 178, .28);
    --halo-violet:  rgba(167, 139, 250, .28);
    --halo-cyan:    rgba(103, 232, 249, .22);
    --grad-cta:     linear-gradient(100deg, #FF6FA5 0%, #A78BFA 100%);
    --grad-halo:    radial-gradient(circle at 20% 0%, rgba(255,143,178,.20) 0, transparent 55%),
                    radial-gradient(circle at 85% 15%, rgba(167,139,250,.20) 0, transparent 55%),
                    radial-gradient(circle at 50% 100%, rgba(103,232,249,.14) 0, transparent 60%);

    --sh-1: 0 1px 2px rgba(120, 100, 170, .06), 0 2px 6px rgba(120, 100, 170, .05);
    --sh-2: 0 6px 22px rgba(120, 100, 170, .10), 0 1px 3px rgba(120, 100, 170, .06);
    --sh-3: 0 24px 64px rgba(60, 45, 95, .18), 0 2px 8px rgba(60, 45, 95, .08);
}

/* ---------- 皮肤 3：霓虹赛博 ----------
 * 深蓝紫底 + 紫青双色辉光 + 网格线；玻璃更暗、发光更明显。 */
:root[data-skin="neon"] {
    --paper:        #0B0F1A;
    --surface:      rgba(24, 29, 46, .62);
    --surface-2:    rgba(30, 36, 56, .52);
    --surface-3:    rgba(36, 43, 66, .82);
    --glass-bg:     rgba(20, 25, 40, .58);
    --glass-bg-2:   rgba(26, 32, 50, .48);
    --glass-filter: saturate(150%) blur(22px);
    --glass-filter-strong: saturate(170%) blur(30px);

    --ink:          #E8ECF8;
    --ink-2:        #A9B4D0;
    --ink-3:        #7A86A8;
    --ink-4:        #5A6484;

    --line:         rgba(140, 160, 255, .16);
    --line-2:       rgba(140, 160, 255, .22);

    --accent:       #7C5CFF;
    --accent-2:     #22D3EE;
    --accent-3:     #F472B6;
    --accent-ink:   #A78BFA;
    --accent-soft:  rgba(124, 92, 255, .16);
    --accent-ring:  rgba(124, 92, 255, .30);

    --halo-pink:    rgba(244, 114, 182, .22);
    --halo-violet:  rgba(124, 92, 255, .28);
    --halo-cyan:    rgba(34, 211, 238, .22);
    --grad-cta:     linear-gradient(100deg, #7C5CFF 0%, #22D3EE 100%);
    --grad-halo:    radial-gradient(circle at 14% -6%, rgba(124,92,255,.34) 0, transparent 55%),
                    radial-gradient(circle at 88% 8%,  rgba(34,211,238,.26) 0, transparent 55%),
                    radial-gradient(circle at 50% 106%, rgba(244,114,182,.20) 0, transparent 60%);

    --sh-1: 0 1px 2px rgba(0, 0, 0, .30), 0 2px 8px rgba(0, 0, 0, .24);
    --sh-2: 0 6px 24px rgba(0, 0, 0, .38), 0 0 0 1px rgba(124, 92, 255, .10);
    --sh-3: 0 24px 64px rgba(0, 0, 0, .55), 0 0 0 1px rgba(124, 92, 255, .14);

    --ok:           #34D399;
    --ok-soft:      rgba(52, 211, 153, .14);
    --warn:         #FBBF24;
    --warn-soft:    rgba(251, 191, 36, .14);
    --danger:       #FB7185;
    --danger-soft:  rgba(251, 113, 133, .14);
    --info:         #60A5FA;
    --info-soft:    rgba(96, 165, 250, .14);
}

/* ---------- 暗色态：所有皮肤共用一套「深底 + 亮字」基底 ---------- */
:root[data-theme="dark"] {
    --surface:      rgba(30, 35, 48, .58);
    --surface-2:    rgba(38, 44, 60, .48);
    --surface-3:    rgba(46, 53, 72, .82);
    --glass-bg:     rgba(26, 31, 43, .58);
    --glass-bg-2:   rgba(34, 40, 55, .48);
    --glass-filter: saturate(140%) blur(22px);
    --glass-filter-strong: saturate(150%) blur(30px);

    --ink:          #E8EAF0;
    --ink-2:        #A6ADBD;
    --ink-3:        #7C8496;
    --ink-4:        #5C6478;

    --line:         rgba(255, 255, 255, .10);
    --line-2:       rgba(255, 255, 255, .14);

    --accent-ink:   #93B4F5;
    --accent-soft:  rgba(147, 180, 245, .14);
    --accent-ring:  rgba(147, 180, 245, .24);

    --ok:           #34D399;
    --ok-soft:      rgba(52, 211, 153, .14);
    --warn:         #FBBF24;
    --warn-soft:    rgba(251, 191, 36, .14);
    --danger:       #FB7185;
    --danger-soft:  rgba(251, 113, 133, .14);
    --info:         #60A5FA;
    --info-soft:    rgba(96, 165, 250, .14);
}
/* 暗色下纸底统一压深；三套皮肤各自的辉光/主色保留，品牌辨识不丢 */
:root[data-theme="dark"][data-skin="glass"] { --paper: #101318; --accent: #7FA6D8; --grad-cta: linear-gradient(100deg, #3A4C66 0%, #6FA8E8 100%); }
:root[data-theme="dark"][data-skin="sakura"] { --paper: #141018; --accent: #FF8FB2; --grad-cta: linear-gradient(100deg, #FF7FAE 0%, #B79CFF 100%); }
:root[data-theme="dark"][data-skin="neon"] { --paper: #070A12; --accent: #9B7BFF; }