/* 星芒工具箱 · 主题语义令牌（浅色 / 深色 + 自动跟随系统） */
:root {
    --accent: #007AFF;
    --accent-hover: #0A84FF;
    --accent-pressed: #0062CC;
    --accent-fill: rgba(0,122,255,0.10);
    --focus-ring: rgba(0,122,255,0.30);
    --selection-bg: rgba(0,122,255,0.16);

    --bg: #F2F2F7;
    --bg-secondary: #FFFFFF;
    --bg-tertiary: #E5E5EA;
    --card: #FFFFFF;
    --card-hover: #FAFAFC;

    --text: #1C1C1E;
    --text-secondary: #6C6C70;
    --text-tertiary: #AEAEB2;
    --text-inverse: #FFFFFF;

    --separator: rgba(60,60,67,0.18);
    --separator-strong: rgba(60,60,67,0.29);

    --success: #34C759;
    --warning: #FF9F0A;
    --danger: #FF3B30;
    --success-fill: rgba(52,199,89,0.12);
    --warning-fill: rgba(255,159,10,0.14);
    --danger-fill: rgba(255,59,48,0.12);

    --toast-bg: #1C1C1E;
    --toast-text: #FFFFFF;

    --accent-orange: #FF6D00;
    --accent-green: #34C759;
    --accent-purple: #7E57C2;
    --accent-teal: #00BCD4;
    --accent-violet: #5856D6;
    --accent-pink: #FF4081;
    --accent-cyan: #40E0D0;

    --cat-info-fill: rgba(0,122,255,0.10);
    --cat-dev-fill: rgba(126,87,194,0.10);
    --cat-doc-fill: rgba(0,188,212,0.10);
    --cat-img-fill: rgba(255,109,0,0.10);
    --cat-sec-fill: rgba(88,86,214,0.10);
    --cat-game-fill: rgba(255,64,129,0.10);
    --cat-net-fill: rgba(0,180,42,0.10);

    --nav-bg: rgba(242,242,247,0.82);
    --nav-menu-bg: rgba(242,242,247,0.96);

    --shadow-sm: 0 1px 3px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.06);
    --shadow-lg: 0 12px 40px rgba(0,0,0,0.08);
    --shadow-card: 0 1px 12px rgba(0,0,0,0.05);
    --shadow-card-hover: 0 8px 32px rgba(0,0,0,0.10);

    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-full: 9999px;
    --radius: var(--radius-md);

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;

    --duration-fast: 150ms;
    --duration-base: 250ms;
    --duration-slow: 350ms;
    --ease: cubic-bezier(0.25,0.1,0.25,1);
    --ease-spring: cubic-bezier(0.34,1.56,0.64,1);

    --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'PingFang SC', 'Helvetica Neue', 'Microsoft YaHei', sans-serif;
    --font-mono: 'SF Mono', ui-monospace, 'HarmonyOS Sans', Menlo, Consolas, monospace;

    /* 存量别名映射（兼容未改造页面） */
    --primary: var(--accent);
    --primary-light: var(--accent-hover);
    --primary-dark: var(--accent-pressed);
    --bg2: var(--bg-secondary);
    --bg3: var(--bg-tertiary);
    --text2: var(--text-secondary);
    --text3: var(--text-tertiary);
    --text-inv: var(--text-inverse);
    --border: var(--separator);
    --border-hover: var(--separator-strong);
    --error: var(--danger);
}

[data-theme="dark"] {
    --accent: #0A84FF;
    --accent-hover: #409CFF;
    --accent-pressed: #0060DF;
    --accent-fill: rgba(10,132,255,0.20);
    --focus-ring: rgba(10,132,255,0.45);
    --selection-bg: rgba(10,132,255,0.30);

    --bg: #1C1C1E;
    --bg-secondary: #2C2C2E;
    --bg-tertiary: #3A3A3C;
    --card: #2C2C2E;
    --card-hover: #333335;

    --text: #FFFFFF;
    --text-secondary: #AEAEB2;
    --text-tertiary: #7C7C80;
    --text-inverse: #FFFFFF;

    --separator: rgba(84,84,88,0.65);
    --separator-strong: rgba(84,84,88,0.85);

    --success: #30D158;
    --warning: #FFD60A;
    --danger: #FF453A;
    --success-fill: rgba(48,209,88,0.22);
    --warning-fill: rgba(255,214,10,0.20);
    --danger-fill: rgba(255,69,58,0.22);

    --toast-bg: #3A3A3C;
    --toast-text: #FFFFFF;

    --accent-orange: #FF9F0A;
    --accent-green: #30D158;
    --accent-purple: #BF5AF2;
    --accent-teal: #40C8E0;
    --accent-violet: #5E5CE6;
    --accent-pink: #FF375F;
    --accent-cyan: #66D4CF;

    --cat-info-fill: rgba(10,132,255,0.20);
    --cat-dev-fill: rgba(191,90,242,0.20);
    --cat-doc-fill: rgba(64,200,224,0.20);
    --cat-img-fill: rgba(255,159,10,0.20);
    --cat-sec-fill: rgba(94,92,230,0.22);
    --cat-game-fill: rgba(255,55,95,0.20);
    --cat-net-fill: rgba(48,209,88,0.20);

    --nav-bg: rgba(28,28,30,0.80);
    --nav-menu-bg: rgba(28,28,30,0.96);

    --shadow-sm: 0 1px 3px rgba(0,0,0,0.30);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.36);
    --shadow-lg: 0 12px 40px rgba(0,0,0,0.44);
    --shadow-card: 0 1px 12px rgba(0,0,0,0.32);
    --shadow-card-hover: 0 8px 32px rgba(0,0,0,0.48);
}

/* 无属性兜底：JS 不可用时仍自动跟随系统（spec §4.5-4） */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --accent: #0A84FF;
        --accent-hover: #409CFF;
        --accent-pressed: #0060DF;
        --accent-fill: rgba(10,132,255,0.20);
        --focus-ring: rgba(10,132,255,0.45);
        --selection-bg: rgba(10,132,255,0.30);

        --bg: #1C1C1E;
        --bg-secondary: #2C2C2E;
        --bg-tertiary: #3A3A3C;
        --card: #2C2C2E;
        --card-hover: #333335;

        --text: #FFFFFF;
        --text-secondary: #AEAEB2;
        --text-tertiary: #7C7C80;
        --text-inverse: #FFFFFF;

        --separator: rgba(84,84,88,0.65);
        --separator-strong: rgba(84,84,88,0.85);

        --success: #30D158;
        --warning: #FFD60A;
        --danger: #FF453A;

        --toast-bg: #3A3A3C;
        --toast-text: #FFFFFF;

        --accent-orange: #FF9F0A;
        --accent-green: #30D158;
        --accent-purple: #BF5AF2;
        --accent-teal: #40C8E0;
        --accent-violet: #5E5CE6;
        --accent-pink: #FF375F;
        --accent-cyan: #66D4CF;

        --cat-info-fill: rgba(10,132,255,0.20);
        --cat-dev-fill: rgba(191,90,242,0.20);
        --cat-doc-fill: rgba(64,200,224,0.20);
        --cat-img-fill: rgba(255,159,10,0.20);
        --cat-sec-fill: rgba(94,92,230,0.22);
        --cat-game-fill: rgba(255,55,95,0.20);
        --cat-net-fill: rgba(48,209,88,0.20);

        --nav-bg: rgba(28,28,30,0.80);
        --nav-menu-bg: rgba(28,28,30,0.96);

        --shadow-sm: 0 1px 3px rgba(0,0,0,0.30);
        --shadow-md: 0 4px 16px rgba(0,0,0,0.36);
        --shadow-lg: 0 12px 40px rgba(0,0,0,0.44);
        --shadow-card: 0 1px 12px rgba(0,0,0,0.32);
        --shadow-card-hover: 0 8px 32px rgba(0,0,0,0.48);
    }
}

/* 主题切换时的整体色彩过渡（尊重减少动效） */
html {
    color-scheme: light dark;
}
[data-theme="light"] { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }

body {
    transition: background-color var(--duration-base) var(--ease), color var(--duration-base) var(--ease);
}

@media (prefers-reduced-motion: reduce) {
    body { transition: none; }
}

::selection {
    background: var(--selection-bg);
}