/* ═══════════════════════════════════════════════════════════════════
   法译通 (FayiTong) — 统一设计 Token
   合并自 design-tokens.css + styles.css，消除重复和冲突。
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── 品牌色 (Warm Terracotta) ── */
  --color-brand-50:  #fef7f0;
  --color-brand-100: #fde9d8;
  --color-brand-200: #f9cfa7;
  --color-brand-300: #f5b076;
  --color-brand-400: #f0a64b;   /* amber accent */
  --color-brand-500: #e77a35;
  --color-brand-600: #d06a2b;
  --color-brand-700: #a84e2f;   /* seal — primary brand */
  --color-brand-800: #85351a;   /* seal-deep */
  --color-brand-900: #5c1f0c;

  /* ── 辅助色 (Pine Green) ── */
  --color-accent-50:  #eaf5f1;
  --color-accent-100: #d4ebe3;
  --color-accent-200: #a3d5c4;
  --color-accent-300: #72bfa5;
  --color-accent-400: #4ba386;
  --color-accent-500: #3d796c;
  --color-accent-600: #284842;  /* pine — primary accent */
  --color-accent-700: #1f3a36;
  --color-accent-800: #102421;  /* pine-deep — sidebar */
  --color-accent-900: #081614;

  /* ── 蓝色系 (Login / Elder / Family pages) ── */
  --color-blue-100: #eaf2fb;
  --color-blue-200: #cfe2ff;
  --color-blue-300: #9fc5ef;
  --color-blue-400: #88a8de;
  --color-blue-500: #456fae;
  --color-blue-600: #4079b6;
  --color-blue-700: #2b5a94;

  /* ── 珊瑚系 (Family / Alert accents) ── */
  --color-coral-100: #fff1ea;
  --color-coral-200: #ffd2ca;
  --color-coral-300: #f7cabf;
  --color-coral-400: #f79b7e;
  --color-coral-500: #f48d72;
  --color-coral-600: #d96747;
  --color-coral-700: #d75d45;

  /* ── 中性色 (Paper & Ink) ── */
  --color-paper:       #f4efe4;
  --color-paper-light: #fffaf1;
  --color-paper-card:  #fff8ef;
  --color-paper-dark:  #efe5d6;
  --color-ink:         #19262b;
  --color-ink-soft:    #526268;
  --color-ink-muted:   #8a969b;
  --color-white:       #ffffff;

  /* ── 语义色 ── */
  --color-danger:       #b64032;
  --color-danger-light: #c53030;
  --color-danger-bg:    #fff5f5;
  --color-success:      #3d8c73;
  --color-success-bg:   #f0fff4;
  --color-warning:      #9a6a00;
  --color-warning-bg:   #fffaf0;
  --color-info:         #2b6cb0;
  --color-info-bg:      #ebf8ff;
  --color-focus:        #1e5eff;

  /* ── 语义色 (Risk Levels) ── */
  --color-risk-high:    #a84e2f;
  --color-risk-high-bg: rgba(168, 78, 47, 0.13);
  --color-risk-medium:  #6f521f;
  --color-risk-medium-bg: rgba(201, 165, 106, 0.22);
  --color-risk-low:     #284842;
  --color-risk-low-bg:  rgba(40, 72, 66, 0.12);
  --color-risk-blocked: #782323;
  --color-risk-blocked-bg: rgba(120, 35, 35, 0.14);

  /* ── 侧边栏 (Dark Sidebar) ── */
  --color-sidebar-bg:        #0c201d;
  --color-sidebar-surface:   rgba(16, 36, 33, 0.96);
  --color-sidebar-text:      rgba(255, 250, 241, 0.66);
  --color-sidebar-text-dim:  rgba(255, 250, 241, 0.62);
  --color-sidebar-active:    rgba(255, 250, 241, 0.92);
  --color-sidebar-hover:     rgba(255, 250, 241, 0.08);
  --color-sidebar-border:    rgba(255, 250, 241, 0.12);

  /* ── 间距 (4px base) ── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── 圆角 ── */
  --radius-sm:   12px;
  --radius-md:   16px;
  --radius-lg:   20px;
  --radius-xl:   24px;
  --radius-2xl:  28px;
  --radius-3xl:  32px;
  --radius-4xl:  34px;
  --radius-full: 999px;

  /* ── 阴影层级 ── */
  --shadow-xs:  0 2px 6px rgba(36, 31, 23, 0.04);
  --shadow-sm:  0 8px 24px rgba(36, 31, 23, 0.06);
  --shadow-md:  0 12px 36px rgba(36, 31, 23, 0.1);
  --shadow-lg:  0 18px 48px rgba(36, 31, 23, 0.1);
  --shadow-xl:  0 24px 60px rgba(36, 31, 23, 0.12);
  --shadow-2xl: 0 28px 70px rgba(16, 36, 33, 0.2);

  /* ── 字体家族 ──
     #UI 统一：全产品使用 Sans Serif。Display 仅用于登录欢迎页字号层级，
     不再使用 Serif（Noto Serif SC / 宋体 / 楷体）。 */
  --font-display: "Noto Sans SC", "Source Han Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-body:    "Noto Sans SC", "Source Han Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono:    "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  /* ── 字号 ── */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  2rem;
  --text-4xl:  2.5rem;
  --text-5xl:  3.5rem;

  /* ── 行高 ── */
  --leading-tight:  1.15;
  --leading-snug:   1.35;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  /* ── 字重 ── */
  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extrabold: 800;
  --weight-black:    900;

  /* ── 过渡 ── */
  --ease-out: 0.22s ease;
  --ease-smooth: 0.25s ease;

  /* ── 流体尺寸 ── */
  --fluid-shell-pad:   clamp(10px, 1.6vw, 24px);
  --fluid-shell-gap:   clamp(12px, 2.4vw, 48px);
  --fluid-card-pad:    clamp(16px, 1.5vw, 24px);
  --fluid-card-radius: clamp(12px, 1.2vw, 16px);
  --fluid-grid-gap:    clamp(14px, 1.8vw, 24px);
  --fluid-heading:     clamp(2.15rem, 5.2vw, 4.7rem);
}

/* ═══════════════════════════════════════════════════════════════════
   UI 2.0 Design Tokens (Enterprise SaaS × Public Service × Age-friendly)
   Issue 02 — 新增 token 层，保留旧 token 以兼容既有页面，避免一次性重写。
   命名遵循《法译通_UI2.0_工业级重构执行方案》§2。
   ═══════════════════════════════════════════════════════════════════ */
:root {
  /* ── Brand (Pine / 深绿) ── */
  --brand-900: #123A32;
  --brand-800: #18473D;
  --brand-700: #24584D;
  --brand-600: #2F6A5D;

  /* ── Accent (Warm Terracotta / 暖橙，降饱和) ── */
  --accent-700: #A84A2B;
  --accent-600: #C45A32;
  --accent-500: #D36E48;
  --accent-100: #F9ECE5;

  /* ── Neutral (2.1：进一步去黄，中性化) ── */
  --bg-app:        #F7F7F4;
  --bg-subtle:     #F1F4F2;
  --surface:       #FFFFFF;
  --surface-muted: #F8F9F8;
  --surface-soft:  #F6F8F7;
  --surface-hover: #F1F4F2;
  --border-default: #E1E6E3;
  --border-strong:  #CDD5D1;

  --text-primary:   #17201D;
  --text-secondary: #66706C;
  --text-tertiary:  #828C88;
  --text-inverse:   #FFFFFF;

  /* ── Status (2.1) ── */
  --success:    #2B7D5B;
  --success-bg: #EAF5F0;
  --warning:    #AA7228;
  --warning-bg: #FBF3E6;
  --danger:     #B34747;
  --danger-bg:  #FBECEC;
  --info:       #3E6FA8;
  --info-bg:    #EDF3FA;

  /* ── Focus (2.1) ── */
  --focus:          #C45A32;
  --focus-ring-color: rgba(196, 90, 50, 0.12);

  /* ── 字体家族 (UI 2.0：正文优先黑体，标题与正文同族避免混排) ── */
  --font-ui: "HarmonyOS Sans SC", "Noto Sans SC", "Source Han Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-heading-ui: "Noto Sans SC", "Source Han Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;

  /* ── 字号阶梯 (Display/H1/H2/H3/Body/Body-S/Label/Caption) ── */
  --fs-display: 28px; --lh-display: 40px; --fw-display: 700;
  --fs-h1: 24px;       --lh-h1: 34px;      --fw-h1: 650;
  --fs-h2: 18px;       --lh-h2: 28px;      --fw-h2: 650;
  --fs-h3: 16px;       --lh-h3: 24px;      --fw-h3: 600;
  --fs-body: 16px;     --lh-body: 26px;    --fw-body: 400;
  --fs-body-s: 14px;   --lh-body-s: 22px;  --fw-body-s: 400;
  --fs-label: 13px;    --lh-label: 20px;   --fw-label: 600;
  --fs-caption: 12px;  --lh-caption: 18px; --fw-caption: 400;

  /* ── 大字模式覆盖 (通过 body[data-font-scale="large"] 应用) ── */
  --fs-body-large: 19px; --lh-body-large: 30px;
  --fs-body-s-large: 17px; --lh-body-s-large: 26px;
  --fs-h3-large: 19px; --fs-h2-large: 21px; --fs-btn-large: 17px;

  /* ── 8pt Grid 间距别名 ── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ── 圆角 (仅三档) ── */
  --radius-s:  8px;
  --radius-m: 12px;
  --radius-l: 16px;

  /* ── 阴影 (克制) ── */
  --shadow-card: 0 1px 2px rgba(18, 38, 31, 0.04);
  --shadow-float: 0 8px 24px rgba(18, 38, 31, 0.08), 0 2px 8px rgba(18, 38, 31, 0.04);

  /* ── Focus (清晰可见，统一) ── */
  --focus-ring: 0 0 0 3px var(--focus-ring-color);

  /* ── 布局 (桌面基准 1440) ── */
  --shell-sidebar-w: 220px;
  --shell-header-h: 72px;
  --shell-main-max: 1120px;
  --shell-gutter: 32px;
  --shell-section-gap: 24px;

  /* ── 触控目标 ── */
  --touch-min: 44px;
}

/* 大字模式：仅提升正文/标题字号，容器自动增高，不整体 zoom
   (applyAccessibilitySettings 将 data-* 写在 documentElement 即 html 上) */
html[data-font-scale="large"] {
  --fs-body: var(--fs-body-large);
  --lh-body: var(--lh-body-large);
  --fs-body-s: var(--fs-body-s-large);
  --lh-body-s: var(--lh-body-s-large);
  --fs-h3: var(--fs-h3-large);
  --fs-h2: var(--fs-h2-large);
  --fs-h1: 27px;
  --lh-h1: 38px;
  --fs-label: 15px;
  --lh-label: 22px;
  --fs-caption: 14px;
  --lh-caption: 21px;
}

/* Keep "超大" genuinely larger than "大字" even where pages use the
   semantic typography tokens instead of inheriting the body font size. */
html[data-font-scale="xl"] {
  --fs-body: 22px;
  --lh-body: 34px;
  --fs-body-s: 19px;
  --lh-body-s: 29px;
  --fs-h3: 22px;
  --lh-h3: 32px;
  --fs-h2: 25px;
  --lh-h2: 36px;
  --fs-h1: 30px;
  --lh-h1: 42px;
  --fs-label: 17px;
  --lh-label: 25px;
  --fs-caption: 15px;
  --lh-caption: 23px;
}

/* 高对比模式：更强背景/文字/边框 */
html[data-contrast="high"] {
  --bg-app: #FFFFFF;
  --bg-subtle: #FFFFFF;
  --surface: #FFFFFF;
  --border-default: #9AA4A0;
  --border-strong: #6B7671;
  --text-primary: #0B120F;
  --text-secondary: #1F2A26;
  --text-tertiary: #3D4844;
}

/* ═══════════════════════════════════════════════════════════════════
   UI 2.2 — Cool-Tech Tokens (Deep Ocean + Intelligent Blue)
   《法译通_UI2.2_简约适老科技感》§3。
   深绿 + 暖橙降级为品牌历史色，不再主导 UI。
   此块置于文件末尾，重映射页面实际引用的语义 token 以完成全局换色。
   ═══════════════════════════════════════════════════════════════════ */
:root {
  /* ── 冷色画布 / 表面 ── */
  --bg-canvas: #F5F7FA;
  --bg-subtle: #EEF2F6;
  --surface: #FFFFFF;
  --surface-elevated: #FBFCFE;
  --surface-soft: #F2F6FC;
  --surface-hover: #EEF2F6;

  /* ── Deep Navy 导航 ── */
  --nav-950: #0B1726;
  --nav-900: #10243A;
  --nav-800: #17314B;

  /* ── Intelligent Blue 主交互 ── */
  --primary-700: #3E57C5;
  --primary-600: #4B67DF;
  --primary-500: #4B67DF;
  --primary-100: #EEF2FF;
  --primary-050: #F2F6FC;

  /* ── Cyan AI Accent（<3% 使用） ── */
  --cyan-600: #106C83;
  --cyan-500: #1689A3;
  --cyan-100: #E5F6F8;

  /* ── 中性文字 ── */
  --text-primary: #172033;
  --text-secondary: #5E6A7D;
  --text-tertiary: #687487;
  --text-inverse: #FFFFFF;

  /* ── 边框 ── */
  --border-default: #DCE3EC;
  --border-strong: #C8D3E1;

  /* ── 状态 ── */
  --success: #28785E;  --success-bg: #E8F4EF;
  --warning: #795014;  --warning-bg: #FDF5E7;
  --danger:  #B54242;  --danger-bg: #FBEAEA;
  --info:    #2F62BE;  --info-bg: #EAF1FC;

  /* ── Focus（蓝） ── */
  --focus: #3B73D1;
  --focus-ring-color: rgba(59, 115, 209, 0.18);
  --focus-ring: 0 0 0 3px rgba(59, 115, 209, 0.18);

  /* ── 布局微调 ── */
  --shell-sidebar-w: 220px;
  --shell-main-max: 1120px;
  --shell-gutter: 40px;

  /* ── 阴影（冷调、极轻） ── */
  --shadow-card: 0 1px 2px rgba(11, 23, 38, 0.03);
  --shadow-float: 0 10px 30px rgba(11, 23, 38, 0.035);
}

/* ── 2.2 冷色调：重映射旧语义 token（页面仍引用 --brand-* / --accent-*）── */
:root {
  /* 品牌（历史深绿 → Deep Navy） */
  --brand-950: #0B1726;
  --brand-900: #10243A;
  --brand-800: #17314B;
  --brand-700: #244F9E;
  --brand-600: #2F62BE;

  /* Accent（历史暖橙 → Intelligent Blue） */
  --accent-700: #244F9E;
  --accent-600: #2F62BE;
  --accent-500: #4779D4;
  --accent-100: #EAF1FC;

  /* 背景别名 */
  --bg-app: var(--bg-canvas);

  /* Sidebar 相关 */
  --color-sidebar-bg: #10243A;
  --color-sidebar-surface: rgba(16, 36, 58, 0.96);
  --color-sidebar-active: rgba(255, 255, 255, 0.92);
  --color-sidebar-hover: rgba(255, 255, 255, 0.08);
  --color-sidebar-border: rgba(255, 255, 255, 0.12);
  --color-sidebar-text: rgba(255, 255, 255, 0.72);
}

/* 高对比模式（冷调） */
html[data-contrast="high"] {
  --bg-app: #FFFFFF;
  --bg-canvas: #FFFFFF;
  --bg-subtle: #FFFFFF;
  --surface: #FFFFFF;
  --border-default: #9AA4B0;
  --border-strong: #6B7A90;
  --text-primary: #0B1220;
  --text-secondary: #1F2A3E;
  --text-tertiary: #3D4A60;
}

/* UI 3.0 compatibility aliases
   Legacy component names resolve to the single cool, trustworthy service palette.
   New work must use the semantic tokens above directly. */
:root {
  --color-brand-50: #F3F7FD;
  --color-brand-100: #EAF1FC;
  --color-brand-200: #C9D9F3;
  --color-brand-300: #9DBAE8;
  --color-brand-400: #6D95DF;
  --color-brand-500: #3F6FC7;
  --color-brand-600: #2F62BE;
  --color-brand-700: #244F9E;
  --color-brand-800: #173D7A;
  --color-brand-900: #10243A;
  --color-brand-deep: #0B1726;

  --color-accent-50: #F1FAFB;
  --color-accent-100: #E5F6F8;
  --color-accent-200: #BEE7EC;
  --color-accent-300: #88D0DA;
  --color-accent-400: #4FB7C7;
  --color-accent-500: #1689A3;
  --color-accent-600: #106C83;
  --color-accent-700: #106C83;
  --color-accent-800: #0C5264;
  --color-accent-900: #083A48;

  --color-paper: #F5F7FA;
  --color-paper-light: #FFFFFF;
  --color-paper-card: #FFFFFF;
  --color-paper-dark: #EEF2F6;
  --color-ink: var(--text-primary);
  --color-ink-soft: var(--text-secondary);
  --color-ink-muted: var(--text-tertiary);
  --color-focus: var(--focus);
  --color-line: var(--border-strong);
}