/* ==========================================================================
   tokens.css — 设计变量（颜色 / 字号 / 间距 / 缓动 / 圆角）
   两套皮肤：默认亮色，html[data-theme="dark"] 切回暗色。
   改这里就能整体换肤；后台的「主题色」会写回 --c1/--c2/--c3。
   ========================================================================== */

:root {
    color-scheme: light;

    /* ---------- 底色与文字 ---------- */
    --bg: #eef3fa;
    --bg-soft: #e6eef8;
    --ink: #151a26;
    --ink-2: rgba(21, 26, 38, 0.72);
    --ink-3: rgba(21, 26, 38, 0.55);
    --ink-4: rgba(21, 26, 38, 0.38);

    /* 卡片玻璃：白色磨砂 */
    --glass-base: rgba(255, 255, 255, 0.68);
    --surface-2: rgba(255, 255, 255, 0.58);   /* chip / 幽灵按钮 / 图标块 */
    --surface-3: rgba(252, 253, 255, 0.97);   /* 面板 / 弹窗 / toast */
    --float-bg: rgba(255, 255, 255, 0.66);    /* 悬浮小圆钮 */
    --float-bg-hover: rgba(255, 255, 255, 0.92);
    --hair: rgba(255, 255, 255, 0.95);        /* 玻璃顶部那条高光 */

    /* ---------- 线与玻璃 ---------- */
    --line: rgba(21, 26, 38, 0.10);
    --line-strong: rgba(21, 26, 38, 0.20);
    --glass: rgba(255, 255, 255, 0.50);
    --glass-hi: rgba(255, 255, 255, 0.72);
    --blur: 22px;

    /* ---------- 背景视频上面那层 ---------- */
    --veil-rgb: 255, 255, 255;
    --veil-k: 1.6;
    --art-flat: 0.34;
    --bright-k: 1;
    --grid-line: rgba(21, 26, 38, 0.055);
    --grain: 0.022;

    /* ---------- 文字光晕（压在背景图上时用） ---------- */
    --halo: rgba(255, 255, 255, 0.9);
    --halo-2: rgba(255, 255, 255, 0.6);

    /* ---------- 主题色（三色流光） ---------- */
    --c1: #6366f1;
    --c2: #0891b2;
    --c3: #db2777;
    --c1-rgb: 99, 102, 241;
    --c2-rgb: 8, 145, 178;
    --c3-rgb: 219, 39, 119;

    /* ---------- 渐变 ---------- */
    --grad-text: linear-gradient(100deg, var(--c2) 0%, var(--c1) 48%, var(--c3) 100%);
    --grad-line: linear-gradient(90deg, transparent, rgba(var(--c2-rgb), 0.55), rgba(var(--c1-rgb), 0.55), transparent);
    --grad-btn: linear-gradient(135deg, rgba(var(--c1-rgb), 0.95), rgba(var(--c2-rgb), 0.85));

    /* ---------- 控件细节 ---------- */
    --track: rgba(21, 26, 38, 0.12);
    --scroll-thumb: rgba(21, 26, 38, 0.22);
    --scroll-thumb-hover: rgba(21, 26, 38, 0.36);
    --skel-rgb: 21, 26, 38;
    --kicker: rgba(var(--c1-rgb), 1);
    --icon-ink: var(--c1);
    --hover-ink: var(--ink);
    --avatar-1: #f8fbff;
    --avatar-2: #dfe8f6;
    --ok-ink: #047857;
    --ok-line: rgba(5, 150, 105, 0.28);
    --ok-bg: rgba(5, 150, 105, 0.10);
    --player-a: rgba(255, 255, 255, 0.84);
    --player-b: rgba(244, 248, 253, 0.92);
    --nav-bg: rgba(255, 255, 255, 0.86);
    --modal-scrim: rgba(236, 242, 250, 0.72);

    /* ---------- 圆角 / 阴影 ---------- */
    --r-lg: 24px;
    --r-md: 16px;
    --r-sm: 12px;
    --r-pill: 999px;
    --shadow-card: 0 22px 48px -26px rgba(26, 36, 66, 0.30), 0 2px 8px -4px rgba(26, 36, 66, 0.16);
    --shadow-glow: 0 18px 44px -20px rgba(var(--c1-rgb), 0.45);

    /* ---------- 排版 ---------- */
    --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
    --font-mono: "SFMono-Regular", "JetBrains Mono", Consolas, "Liberation Mono", Menlo, monospace;

    --fs-hero: clamp(2.5rem, 5.4vw, 4.15rem);
    --fs-h2: clamp(1.15rem, 1.6vw, 1.4rem);
    --fs-lead: clamp(1rem, 1.15vw, 1.1rem);
    --fs-body: 15px;
    --fs-sm: 13.5px;
    --fs-xs: 12px;

    /* ---------- 间距节奏 ---------- */
    --gap-page: clamp(16px, 2vw, 34px);
    --gap-section: clamp(46px, 6vw, 84px);
    --pad-card: clamp(20px, 2.2vw, 30px);

    /* ---------- 动效 ---------- */
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
    --dur: 0.55s;

    /* ---------- 布局 ---------- */
    --sidebar-w: 268px;
    --max-w: 1180px;
}

/* ==========================================================================
   暗色皮肤：点侧栏的月亮图标切换，选择记在这台设备上
   ========================================================================== */

html[data-theme="dark"] {
    color-scheme: dark;

    --bg: #07080c;
    --bg-soft: #0b0e15;
    --ink: #f2f4f9;
    --ink-2: rgba(242, 244, 249, 0.72);
    --ink-3: rgba(242, 244, 249, 0.48);
    --ink-4: rgba(242, 244, 249, 0.28);

    --glass-base: rgba(9, 11, 17, 0.45);
    --surface-2: rgba(255, 255, 255, 0.04);
    --surface-3: rgba(14, 16, 23, 0.94);
    --float-bg: rgba(12, 14, 20, 0.5);
    --float-bg-hover: rgba(18, 21, 30, 0.72);
    --hair: rgba(255, 255, 255, 0.22);

    --line: rgba(255, 255, 255, 0.09);
    --line-strong: rgba(255, 255, 255, 0.16);
    --glass: rgba(255, 255, 255, 0.045);
    --glass-hi: rgba(255, 255, 255, 0.075);

    --veil-rgb: 6, 7, 11;
    --veil-k: 1.9;
    --art-flat: 0.62;
    --bright-k: 0.58;
    --grid-line: rgba(255, 255, 255, 0.055);
    --grain: 0.035;

    --halo: rgba(4, 5, 9, 0.6);
    --halo-2: rgba(4, 5, 9, 0.5);

    --grad-text: linear-gradient(100deg,
        color-mix(in oklab, var(--c2) 60%, white) 0%,
        color-mix(in oklab, var(--c1) 55%, white) 46%,
        color-mix(in oklab, var(--c3) 55%, white) 100%);

    --track: rgba(255, 255, 255, 0.08);
    --scroll-thumb: rgba(255, 255, 255, 0.18);
    --scroll-thumb-hover: rgba(255, 255, 255, 0.3);
    --skel-rgb: 255, 255, 255;
    --kicker: rgba(var(--c2-rgb), 0.95);
    --icon-ink: #ffffff;
    --hover-ink: #ffffff;
    --avatar-1: #1b1e2a;
    --avatar-2: #0e1017;
    --ok-ink: #6ee7b7;
    --ok-line: rgba(52, 211, 153, 0.28);
    --ok-bg: rgba(52, 211, 153, 0.08);
    --player-a: rgba(24, 26, 36, 0.9);
    --player-b: rgba(12, 14, 20, 0.92);
    --nav-bg: rgba(12, 14, 20, 0.86);
    --modal-scrim: rgba(4, 5, 8, 0.66);

    --shadow-card: 0 30px 70px -32px rgba(0, 0, 0, 0.85);
    --shadow-glow: 0 18px 50px -18px rgba(var(--c1-rgb), 0.55);
}