/* ============================================================
   引智人事官网 — 设计系统地基 (Design System Foundation)
   ArchitectUX · 令牌层 / 明-暗-跟随系统主题 / 体验与可访问性骨架
   本文件须作为【首个】样式表加载（在 style.css 之前）。
   ============================================================ */

/* ---------- 1. 设计令牌（浅色 /erral） ---------- */
/* 主题色取自《人事托管服务宣传手册最终版》PDF：商务蓝主调 */
:root {
    /* 品牌色 — 商务蓝 Blue 主色调 */
    --primary: #0070c0;          /* 主蓝（PDF #0070c0） */
    --primary-dark: #005a9e;     /* 深蓝 */
    --primary-light: #deebf7;    /* 浅蓝底（PDF #deebf7） */
    --primary-2: #29b5f0;        /* 亮蓝渐变端（PDF #29b5f0） */
    --primary-2-dark: #0ea5e9;
    /* RGB 形式，便于 rgba() 阴影/光晕派生 */
    --primary-rgb: 0, 112, 192;
    --primary-2-rgb: 41, 181, 240;

    --accent: #f59e0b;           /* CTA 暖琥珀（与蓝形成对比，用于「申请试用」等强转化按钮） */
    --accent-dark: var(--warning);
    --accent-light: var(--warning-light);
    --success: #059669;
    --success-light: #d1fae5;
    --success-bg: #ecfdf5;
    --warning: #d97706;
    --warning-light: #fef3c7;
    --warning-bg: #fffbeb;
    --danger: #dc2626;
    --danger-light: #fee2e2;
    --danger-bg: #fef2f2;
    /* 风险等级三档（自查表/风险预警/评估结果统一复用） */
    --risk-high: var(--danger);
    --risk-high-bg: var(--danger-light);
    --risk-mid: var(--warning);
    --risk-mid-bg: var(--warning-bg);
    --risk-low: var(--success);
    --risk-low-bg: var(--success-bg);

    /* 圆角令牌（全站统一，禁用 5/13/14/18/24px 等游离值） */
    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-pill: 999px;

    /* 字号令牌（梯度化，禁用 14.5/21/40/52/64/120px 等游离值） */
    --text-xs: 12px;
    --text-sm: 13px;
    --text-base: 14px;
    --text-md: 15px;
    --text-lg: 16px;
    --text-xl: 18px;
    --text-2xl: 20px;
    --text-3xl: 24px;
    --text-4xl: 30px;
    --text-5xl: 38px;
    --text-6xl: 48px;
    --text-7xl: 56px;
    --text-8xl: 64px;

    /* 内容宽度令牌（替换内联 max-width 散值） */
    --prose-width: 720px;   /* 文章详情 / 长文 */
    --form-width: 560px;    /* 单列表单 */
    --list-width: 900px;    /* 列表 / 时间线 */
    --wide-width: 960px;    /* 宽表 / 评测表 */

    /* 语义表面（背景层级） */
    --bg-primary: #ffffff;
    --bg-secondary: #f5f8fc;     /* 极浅蓝白 */
    --bg-tertiary: #e6f0f8;      /* 浅蓝底 */
    --surface: #ffffff;          /* 卡片 / 弹窗 / 浮层 */
    --surface-2: #f5f8fc;        /* 次级面板 / 输入框底 */
    --surface-3: #e0eaf3;        /* 三级面板 / 表头交替 */

    /* 文字层级 */
    --text-primary: #1a2e45;     /* 深海军蓝 */
    --text-secondary: #44546a;   /* PDF 石板色 */
    --text-muted: #718096;       /* PDF 中性灰蓝 */
    --text-dark: var(--text-primary);
    --text-light: var(--text-secondary);

    /* 描边 */
    --border-color: #dee0e3;     /* PDF 中性边色 */

    /* 头部 / 页脚 */
    --header-bg: rgba(255, 255, 255, .92);
    --header-border: rgba(222, 224, 227, .8);
    --footer-bg: #0a2540;        /* 深海军蓝 */
    --footer-text: #a0b4c5;
    --footer-link: #a0b4c5;
    --footer-heading: #ffffff;
    --footer-bottom-text: #6b8aa8;
    --footer-divider: rgba(255, 255, 255, .1);

    /* 蓝色调装饰（图文分栏媒体区等） */
    --tint-blue-from: #e6f0f8;
    --tint-blue-to: #cfe2f2;
    --tint-blue-glow: rgba(0, 112, 192, .10);

    /* 阴影 */
    --shadow-soft: 0 6px 24px rgba(0, 0, 0, .06);
    --shadow-card: 0 12px 40px rgba(0, 112, 192, .14);
    --shadow-primary: 0 8px 24px rgba(0, 112, 192, .30);

    /* 渐变令牌（全站统一复用） */
    --grad-primary: linear-gradient(135deg, var(--primary), var(--primary-2));
    --grad-hero: linear-gradient(135deg, #0a1628 0%, #003d6e 40%, #0070c0 70%, #29b5f0 100%);
    --grad-banner: linear-gradient(135deg, #0a1628 0%, #003d6e 40%, #0070c0 100%);
    --grad-footer: linear-gradient(180deg, #0a1628 0%, #0a2540 100%);

    /* 旧别名（保持既有代码可用，统一指向语义令牌） */
    --text: var(--text-primary);
    --bg: var(--bg-primary);
    --border: var(--border-color);
    --bg-gray: var(--bg-secondary);
    --bg-blue: var(--bg-tertiary);
    /* teal 别名回填，老代码引用 --tint-teal-* 时落到新蓝调 */
    --tint-teal-from: var(--tint-blue-from);
    --tint-teal-to: var(--tint-blue-to);
    --tint-teal-glow: var(--tint-blue-glow);
}

/* ---------- 2. 暗色主题令牌 ---------- */
/* 2a. 跟随系统：未显式指定 light 时，系统为深色则启用 */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --primary: #29b5f0;
        --primary-dark: #0070c0;
        --primary-light: #0d2540;
        --primary-2: #38bdf8;
        --primary-2-dark: #0ea5e9;
        --primary-rgb: 41, 181, 240;
        --primary-2-rgb: 56, 189, 248;
        --accent: #fbbf24;
        --accent-dark: #f59e0b;
        --accent-light: #2a2212;
        --success: #10b981;
        --success-light: #065f46;
        --success-bg: #052e2b;
        --warning: #fbbf24;
        --warning-light: #78350f;
        --warning-bg: #2a1c0a;
        --danger: #f87171;
        --danger-light: #7f1d1d;
        --danger-bg: #2a1212;
        --risk-high: var(--danger);
        --risk-high-bg: #2a1212;
        --risk-mid: #fbbf24;
        --risk-mid-bg: #2a1c0a;
        --risk-low: var(--success);
        --risk-low-bg: #052e2b;

        --bg-primary: #0a1420;
        --bg-secondary: #0f1a2b;
        --bg-tertiary: #0d2038;
        --surface: #16223a;
        --surface-2: #1e2d4a;
        --surface-3: #263858;

        --text-primary: #e2eef5;
        --text-secondary: #9bb5c7;
        --text-muted: #6b8aa8;
        --text-dark: var(--text-primary);
        --text-light: var(--text-secondary);

        --border-color: #233a5b;

        --header-bg: rgba(10, 20, 32, .88);
        --header-border: rgba(255, 255, 255, .08);
        --footer-bg: #050d18;
        --footer-text: #9bb5c7;
        --footer-link: #9bb5c7;
        --footer-heading: #ffffff;
        --footer-bottom-text: #5a7d9b;
        --footer-divider: rgba(255, 255, 255, .08);

        --tint-blue-from: #0d2540;
        --tint-blue-to: #133a5b;
        --tint-blue-glow: rgba(41, 181, 240, .18);

        --shadow-soft: 0 6px 24px rgba(0, 0, 0, .45);
        --shadow-card: 0 12px 40px rgba(0, 0, 0, .55);
        --shadow-primary: 0 8px 24px rgba(41, 181, 240, .30);

        --grad-primary: linear-gradient(135deg, var(--primary), var(--primary-2));
        --grad-hero: linear-gradient(135deg, #050d18 0%, #0d2540 40%, #0070c0 70%, #29b5f0 100%);
        --grad-banner: linear-gradient(135deg, #050d18 0%, #0d2540 40%, #0070c0 100%);
        --grad-footer: linear-gradient(180deg, #050d18 0%, #0a1628 100%);

        --text: var(--text-primary);
        --bg: var(--bg-primary);
        --border: var(--border-color);
        --bg-gray: var(--bg-secondary);
        --bg-blue: var(--bg-tertiary);
        --tint-teal-from: var(--tint-blue-from);
        --tint-teal-to: var(--tint-blue-to);
        --tint-teal-glow: var(--tint-blue-glow);
    }
}
/* 2b. 显式深色：强制覆盖（即便系统为浅色） */
:root[data-theme="dark"] {
    --primary: #29b5f0;
    --primary-dark: #0070c0;
    --primary-light: #0d2540;
    --primary-2: #38bdf8;
    --primary-2-dark: #0ea5e9;
    --primary-rgb: 41, 181, 240;
    --primary-2-rgb: 56, 189, 248;
    --accent: #fbbf24;
    --accent-dark: #f59e0b;
    --accent-light: #2a2212;
    --success: #10b981;
    --success-light: #065f46;
    --success-bg: #052e2b;
    --warning: #fbbf24;
    --warning-light: #78350f;
    --warning-bg: #2a1c0a;
    --danger: #f87171;
    --danger-light: #7f1d1d;
    --danger-bg: #2a1212;
    --risk-high: var(--danger);
    --risk-high-bg: #2a1212;
    --risk-mid: #fbbf24;
    --risk-mid-bg: #2a1c0a;
    --risk-low: var(--success);
    --risk-low-bg: #052e2b;

    --bg-primary: #0a1420;
    --bg-secondary: #0f1a2b;
    --bg-tertiary: #0d2038;
    --surface: #16223a;
    --surface-2: #1e2d4a;
    --surface-3: #263858;

    --text-primary: #e2eef5;
    --text-secondary: #9bb5c7;
    --text-muted: #6b8aa8;
    --text-dark: var(--text-primary);
    --text-light: var(--text-secondary);

    --border-color: #233a5b;

    --header-bg: rgba(10, 20, 32, .88);
    --header-border: rgba(255, 255, 255, .08);
    --footer-bg: #050d18;
    --footer-text: #9bb5c7;
    --footer-link: #9bb5c7;
    --footer-heading: #ffffff;
    --footer-bottom-text: #5a7d9b;
    --footer-divider: rgba(255, 255, 255, .08);

    --tint-blue-from: #0d2540;
    --tint-blue-to: #133a5b;
    --tint-blue-glow: rgba(41, 181, 240, .18);

    --shadow-soft: 0 6px 24px rgba(0, 0, 0, .45);
    --shadow-card: 0 12px 40px rgba(0, 0, 0, .55);
    --shadow-primary: 0 8px 24px rgba(41, 181, 240, .30);

    --grad-primary: linear-gradient(135deg, var(--primary), var(--primary-2));
    --grad-hero: linear-gradient(135deg, #050d18 0%, #0d2540 40%, #0070c0 70%, #29b5f0 100%);
    --grad-banner: linear-gradient(135deg, #050d18 0%, #0d2540 40%, #0070c0 100%);
    --grad-footer: linear-gradient(180deg, #050d18 0%, #0a1628 100%);

    --text: var(--text-primary);
    --bg: var(--bg-primary);
    --border: var(--border-color);
    --bg-gray: var(--bg-secondary);
    --bg-blue: var(--bg-tertiary);
}

/* ---------- 3. 全局体验骨架 ---------- */

/* 3a. 可访问性：键盘焦点环（统一、明显、不破坏鼠标体验） */
:focus-visible {
    outline: 2.5px solid var(--primary);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}
/* 移除鼠标点击的默认 outline，但保留键盘 focus-visible */
:focus:not(:focus-visible) { outline: none; }

/* 3b. 跳转主内容（屏幕阅读器 / 键盘用户） */
.skip-link {
    position: fixed; top: 10px; left: 50%; transform: translate(-50%, -150%);
    z-index: 3000; background: var(--primary); color: #fff;
    padding: 10px 20px; border-radius: var(--radius-sm); font-size: var(--text-base); font-weight: 600;
    box-shadow: 0 8px 24px rgba(0, 112, 192, .35);
    transition: transform .25s ease;
}
.skip-link:focus { transform: translate(-50%, 0); }

/* 3c. 主题切换器（头部，三态分段控件） */
.theme-toggle {
    display: inline-flex; align-items: center; gap: 2px;
    background: var(--surface-2); border: 1px solid var(--border-color);
    border-radius: var(--radius-pill); padding: 3px; flex: none;
}
.theme-toggle-option {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border: none; background: transparent;
    color: var(--text-muted); border-radius: var(--radius-pill); cursor: pointer;
    transition: color .2s, background-color .2s, box-shadow .2s;
}
.theme-toggle-option .ic { width: 16px; height: 16px; }
.theme-toggle-option:hover { color: var(--text-primary); }
.theme-toggle-option.active {
    background: var(--primary); color: #fff;
    box-shadow: 0 2px 10px rgba(0, 112, 192, .35);
}

/* 3d. 头部滚动态：增加投影与边界，强化层次 */
.header.scrolled {
    box-shadow: 0 4px 22px rgba(0, 0, 0, .09);
    border-bottom-color: var(--header-border);
}
:root[data-theme="dark"] .header.scrolled { box-shadow: 0 4px 22px rgba(0, 0, 0, .5); }

/* ---------- 3f. 超大屏放松指示线；汉堡态隐藏下划线 ---------- */
@media (max-width: 1280px) {
    /* 汉堡菜单态不显示横杠，由 style.css 控制 */
}

/* ---------- 4. 动效偏好（尊重系统「减弱动态」） ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .reveal { opacity: 1 !important; transform: none !important; }
    .header.scrolled { transition: none; }
}