/* ========== CSS Variables ========== */

:root {
    --bg-body: #f4f5f7;
    --bg-card: rgba(255, 255, 255, 0.88);
    --bg-card-solid: #ffffff;
    --bg-aside: rgba(255, 255, 255, 0.9);
    --bg-footer: rgba(255, 255, 255, 0.78);
    --bg-input: rgba(247, 248, 250, 0.8);
    --bg-hover: rgba(244, 245, 247, 0.7);
    --bg-code: rgba(248, 249, 251, 0.8);
    --bg-tag: rgba(245, 158, 11, 0.08);
    --bg-tab-active: rgba(255, 255, 255, 0.95);
    --bg-overlay: rgba(30, 41, 59, 0.4);

    --glass-bg: rgba(255, 255, 255, 0.78);
    --glass-border: rgba(255, 255, 255, 0.6);
    --glass-blur: blur(24px) saturate(180%);
    --glass-blur-light: blur(14px) saturate(160%);
    --glass-blur-heavy: blur(32px) saturate(180%);

    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    --text-light: #cbd5e1;
    --text-tertiary: #cbd5e1;
    --text-white: #ffffff;
    --text-nav: #475569;
    --text-nav-hover: #f59e0b;
    --text-nav-active: #f59e0b;

    /* 主强调色：鲜亮琥珀 */
    --accent: #f59e0b;
    --accent-hover: #d97706;
    --accent-light: rgba(245, 158, 11, 0.1);
    --accent-dark: #b45309;
    --accent-glow: rgba(245, 158, 11, 0.28);
    /* 次强调色：靛蓝（链接、交互态） */
    --accent-2: #6366f1;
    --accent-2-hover: #4f46e5;
    --accent-2-light: rgba(99, 102, 241, 0.1);
    /* 多彩标签色板 */
    --tag-blue: #3b82f6;
    --tag-green: #10b981;
    --tag-purple: #8b5cf6;
    --tag-pink: #ec4899;
    --tag-cyan: #06b6d4;
    --tag-red: #ef4444;

    --border-color: #e8eaed;
    --border-light: #f1f3f5;
    --border-input: #dde1e6;
    --glass-border-color: rgba(148, 163, 184, 0.25);

    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.03);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04);
    --shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.08), 0 4px 10px rgba(15, 23, 42, 0.05);
    --shadow-card: 0 2px 8px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.03);
    --shadow-elevated: 0 20px 48px rgba(15, 23, 42, 0.12), 0 8px 16px rgba(15, 23, 42, 0.06);
    --shadow-glass: 0 8px 32px rgba(15, 23, 42, 0.06);
    --shadow-accent: 0 8px 24px rgba(245, 158, 11, 0.25);

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-round: 50%;
    --card-radius: 20px;

    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;

    --aside-width: 220px;
    --sidebar-width: 300px;
    --mobile-header-height: 52px;

    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    --transition-spring: 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ========== Dark Mode Variables ========== */
body.dark-mode {
    --bg-body: #0f172a;
    --bg-card: rgba(30, 41, 59, 0.72);
    --bg-card-solid: #1e293b;
    --bg-aside: rgba(30, 41, 59, 0.85);
    --bg-footer: rgba(15, 23, 42, 0.8);
    --bg-input: rgba(51, 65, 85, 0.7);
    --bg-hover: rgba(51, 65, 85, 0.6);
    --bg-code: rgba(51, 65, 85, 0.7);
    --bg-tag: rgba(245, 158, 11, 0.12);
    --bg-tab-active: rgba(30, 41, 59, 0.9);
    --bg-overlay: rgba(0, 0, 0, 0.7);

    --glass-bg: rgba(30, 41, 59, 0.78);
    --glass-border: rgba(148, 163, 184, 0.12);
    --glass-border-color: rgba(148, 163, 184, 0.1);

    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --text-light: #64748b;
    --text-tertiary: #94a3b8;
    --text-nav: #cbd5e1;
    --text-nav-hover: #fbbf24;
    --text-nav-active: #fbbf24;

    --border-color: #334155;
    --border-light: #1e293b;
    --border-input: #475569;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.4);
    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.2);
    --shadow-elevated: 0 20px 48px rgba(0, 0, 0, 0.5);
    --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.3);
    --shadow-accent: 0 8px 24px rgba(251, 191, 36, 0.2);

    --accent: #fbbf24;
    --accent-hover: #f59e0b;
    --accent-light: rgba(251, 191, 36, 0.12);
    --accent-dark: #d97706;
    --accent-glow: rgba(251, 191, 36, 0.25);
    --accent-2: #818cf8;
    --accent-2-hover: #6366f1;
    --accent-2-light: rgba(129, 140, 248, 0.12);
}

/* Shiguang semantic tokens */
:root {
    color-scheme: light;
    --bg-body: #edf8ff;
    --bg-card: rgba(255, 255, 255, 0.68);
    --bg-card-solid: rgba(255, 255, 255, 0.82);
    --bg-aside: rgba(255, 255, 255, 0.84);
    --bg-footer: rgba(255, 255, 255, 0.58);
    --bg-input: rgba(248, 251, 255, 0.72);
    --bg-hover: rgba(255, 255, 255, 0.56);
    --bg-code: #151a24;
    --code-block-text: #e7edf6;
    --bg-tag: rgba(84, 180, 255, 0.11);
    --bg-tab-active: rgba(255, 255, 255, 0.78);
    --bg-overlay: rgba(36, 44, 60, 0.22);

    --glass-bg: rgba(255, 255, 255, 0.66);
    --glass-border: rgba(255, 255, 255, 0.84);
    --glass-border-color: rgba(119, 136, 160, 0.12);
    --glass-blur: blur(26px) saturate(155%);
    --glass-blur-light: blur(18px) saturate(145%);
    --glass-blur-heavy: blur(30px) saturate(165%);

    --text-primary: #20242b;
    --text-secondary: #687281;
    --text-muted: #929ba8;
    --text-light: #c2c9d2;
    --text-tertiary: #aab2bd;
    --text-nav: #596271;
    --text-nav-hover: #3d9eff;
    --text-nav-active: #3d9eff;

    --accent: #54b4ff;
    --accent-rgb: 84, 180, 255;
    --accent-hover: #328fe8;
    --accent-light: rgba(84, 180, 255, 0.11);
    --accent-dark: #197ac9;
    --accent-glow: rgba(84, 180, 255, 0.30);
    --accent-2: #927aff;
    --accent-2-hover: #745ce8;
    --accent-2-light: rgba(146, 122, 255, 0.11);

    --border-color: rgba(119, 136, 160, 0.14);
    --border-light: rgba(119, 136, 160, 0.10);
    --border-input: rgba(119, 136, 160, 0.18);

    --shadow-sm: 0 7px 22px rgba(68, 81, 107, 0.07);
    --shadow-md: 0 14px 40px rgba(68, 81, 107, 0.10), inset 0 1px 0 rgba(255,255,255,.94);
    --shadow-lg: 0 22px 64px rgba(68, 81, 107, 0.13), inset 0 1px 0 rgba(255,255,255,.96);
    --shadow-card: 0 18px 50px rgba(68, 81, 107, 0.10), inset 0 1px 0 rgba(255,255,255,.94);
    --shadow-elevated: 0 30px 90px rgba(55, 68, 94, 0.20);
    --shadow-glass: 0 24px 72px rgba(66, 81, 107, 0.13), inset 0 1px 0 rgba(255,255,255,.96);
    --shadow-accent: 0 12px 30px rgba(84, 180, 255, 0.24);

    --radius-sm: 10px;
    --radius-md: 15px;
    --radius-lg: 22px;
    --radius-xl: 30px;
    --card-radius: 26px;
    --mobile-header-height: 64px;
}

body.dark-mode {
    color-scheme: dark;
    --bg-body: #101724;
    --bg-card: rgba(27, 37, 54, 0.70);
    --bg-card-solid: rgba(27, 37, 54, 0.86);
    --bg-aside: rgba(24, 34, 50, 0.92);
    --bg-footer: rgba(17, 25, 39, 0.72);
    --bg-input: rgba(39, 51, 70, 0.76);
    --bg-hover: rgba(66, 84, 108, 0.28);
    --bg-code: #0d1420;
    --code-block-text: #e7edf6;
    --bg-tag: rgba(105, 190, 255, 0.13);
    --bg-tab-active: rgba(43, 56, 76, 0.80);
    --bg-overlay: rgba(4, 8, 16, 0.72);
    --glass-bg: rgba(27, 37, 54, 0.70);
    --glass-border: rgba(173, 199, 231, 0.10);
    --glass-border-color: rgba(173, 199, 231, 0.11);

    --text-primary: #edf5ff;
    --text-secondary: #bcc9d8;
    --text-muted: #8796a8;
    --text-light: #586a7f;
    --text-tertiary: #738499;
    --text-nav: #bdcad8;
    --text-nav-hover: #76c7ff;
    --text-nav-active: #76c7ff;

    --accent: #69beff;
    --accent-rgb: 105, 190, 255;
    --accent-hover: #8bcfff;
    --accent-light: rgba(105, 190, 255, 0.13);
    --accent-dark: #3e9de5;
    --accent-2: #a996ff;
    --accent-2-hover: #c0b2ff;

    --border-color: rgba(173, 199, 231, 0.13);
    --border-light: rgba(173, 199, 231, 0.09);
    --border-input: rgba(173, 199, 231, 0.16);
    --shadow-card: 0 20px 54px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255,255,255,.04);
    --shadow-glass: 0 26px 76px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255,255,255,.04);
}