/* ==========================================================================
   cinema / tokens.css — 设计变量层
   规则：页面样式只允许引用 --c-* / --sp-* / --r-* / --fs-* 等变量，
        不允许再出现硬编码色值；所有主题差异都在本文件内完成。
   ========================================================================== */

:root {
    /* ---- 品牌色（暗色为默认） ---- */
    --c-brand: #ff6b57;
    --c-brand-strong: #ff4f36;
    --c-accent: #ffb03a;
    --c-brand-soft: rgba(255, 107, 87, 0.16);
    --c-brand-softer: rgba(255, 107, 87, 0.08);
    --c-brand-gradient: linear-gradient(135deg, #ff7a45 0%, #ffb03a 100%);

    /* ---- 底色与表面 ---- */
    --c-bg: #0b0d12;
    --c-bg-elevated: #0e1118;
    --c-surface: #141822;
    --c-surface-hover: #1a1f2b;
    --c-surface-sunken: #0f131b;
    --c-scrim: rgba(6, 8, 12, 0.72);

    /* ---- 文字 ---- */
    --c-text: #f2f4f8;
    --c-text-secondary: #98a2b3;
    --c-text-muted: #7f8a9a;
    --c-text-on-brand: #1a0f06;

    /* ---- 描边 ---- */
    --c-border: rgba(255, 255, 255, 0.09);
    --c-border-strong: rgba(255, 255, 255, 0.16);
    --c-divider: rgba(255, 255, 255, 0.06);

    /* ---- 状态色 ---- */
    --c-success: #5fd39b;
    --c-success-soft: rgba(95, 211, 155, 0.14);
    --c-warning: #f0b849;
    --c-warning-soft: rgba(240, 184, 73, 0.14);
    --c-danger: #ff6a5e;
    --c-danger-soft: rgba(255, 106, 94, 0.14);
    --c-info: #6aa8ff;
    --c-info-soft: rgba(106, 168, 255, 0.14);

    /* ---- 网盘品牌识别色（图标底色，不参与主题切换） ---- */
    --c-pan-quark: #5b6cf9;
    --c-pan-ali: #3c8cff;
    --c-pan-baidu: #2b6cf6;
    --c-pan-uc: #ff8a1f;
    --c-pan-xunlei: #1f9cff;
    --c-pan-magnet: #8f7bff;
    --c-pan-guangya: #21c08b;
    --c-pan-mobile: #3fbf8f;
    --c-pan-115: #2ea3e0;
    --c-pan-tianyi: #3f7be0;

    /* ---- 尺寸单位 ---- */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-7: 32px;
    --sp-8: 40px;
    --sp-9: 56px;

    --r-xs: 4px;
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 14px;
    --r-xl: 20px;
    --r-pill: 999px;

    --fs-xs: 11px;
    --fs-sm: 12px;
    --fs-base: 14px;
    --fs-md: 15px;
    --fs-lg: 17px;
    --fs-xl: 21px;
    --fs-2xl: 26px;
    --fs-3xl: 34px;

    --lh-tight: 1.25;
    --lh-normal: 1.6;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.5);
    --shadow-brand: 0 8px 24px rgba(255, 107, 87, 0.28);

    --z-nav: 200;
    --z-drawer: 400;
    --z-dialog: 600;
    --z-toast: 800;

    --nav-h: 60px;
    --container: 1180px;

    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --dur-fast: 0.15s;
    --dur: 0.22s;

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

    color-scheme: dark;
}

/* ---- 亮色主题：跟随系统，或由用户手动切到 light ---- */
:root[data-theme="light"] {
    --c-brand: #f4583f;
    --c-brand-strong: #d9402a;
    --c-accent: #f59300;
    --c-brand-soft: rgba(244, 88, 63, 0.12);
    --c-brand-softer: rgba(244, 88, 63, 0.06);
    --c-brand-gradient: linear-gradient(135deg, #f4583f 0%, #f59300 100%);

    --c-bg: #f6f7f9;
    --c-bg-elevated: #ffffff;
    --c-surface: #ffffff;
    --c-surface-hover: #f2f4f7;
    --c-surface-sunken: #eef0f4;
    --c-scrim: rgba(15, 18, 24, 0.42);

    --c-text: #16181d;
    --c-text-secondary: #5b6472;
    --c-text-muted: #8a92a0;
    --c-text-on-brand: #ffffff;

    --c-border: rgba(16, 24, 40, 0.1);
    --c-border-strong: rgba(16, 24, 40, 0.18);
    --c-divider: rgba(16, 24, 40, 0.07);

    --c-success: #12855b;
    --c-success-soft: rgba(18, 133, 91, 0.1);
    --c-warning: #a86a00;
    --c-warning-soft: rgba(168, 106, 0, 0.1);
    --c-danger: #d92d20;
    --c-danger-soft: rgba(217, 45, 32, 0.09);
    --c-info: #1a6ddb;
    --c-info-soft: rgba(26, 109, 219, 0.09);

    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
    --shadow-md: 0 6px 18px rgba(16, 24, 40, 0.08);
    --shadow-lg: 0 18px 46px rgba(16, 24, 40, 0.14);
    --shadow-brand: 0 8px 22px rgba(244, 88, 63, 0.22);

    color-scheme: light;
}