/* Hedui design tokens — design/web-redesign.md §4.2–4.4, §4.7
 * Complete light set on :root; complete dark sets in media and [data-theme]. */

:root {
  --bg: #FBFCFD;
  --surface: #FFFFFF;
  --surface-sunken: #F2F5F8;
  --line: #DCE3EA;
  --line-strong: #C2CCD6;
  --text: #121821;
  --text-muted: #5A6472;
  --text-faint: #8892A0;
  --accent: #1F5FA8;
  --accent-weak: #E8F0F9;
  --st-verified: #2F7A57;
  --st-review: #9A6206;
  --st-qc: #A03828;
  --st-limit: #7A6224;
  --st-blocked: #5F4A94;
  --series-1: #1F5FA8;
  --series-2: #2F7A57;
  --series-3: #A03828;
  --series-4: #7A5CA8;
  --series-5: #9A6206;
  --series-6: #2A7C8C;
  --chart-band: rgb(90 100 114 / 0.08);

  --font-sans: "Inter", "Source Han Sans SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Consolas, monospace;

  --text-11: 11px;
  --text-12: 12px;
  --text-13: 13px;
  --text-15: 15px;
  --text-17: 17px;
  --text-21: 21px;

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

  --r-chip: 3px;
  --r-control: 6px;
  --r-card: 8px;

  --shadow-drawer: 0 8px 24px rgb(0 0 0 / 0.18);

  --motion-drawer: 160ms cubic-bezier(0.2, 0.7, 0.3, 1);
  --motion-mask: 120ms ease;

  /* Compatibility aliases for existing component rules (resolve via semantic tokens). */
  --color-primary: var(--accent);
  --color-primary-focus: var(--accent);
  --color-primary-on-dark: var(--accent);
  --color-ink: var(--text);
  --color-body: var(--text);
  --color-body-on-dark: var(--text);
  --color-body-muted: var(--text-faint);
  --color-ink-muted-80: var(--text-muted);
  --color-ink-muted-48: var(--text-faint);
  --color-divider-soft: var(--line);
  --color-hairline: var(--line);
  --color-canvas: var(--surface);
  --color-canvas-parchment: var(--bg);
  --color-surface-pearl: var(--surface-sunken);
  --color-surface-tile-1: var(--surface-sunken);
  --color-surface-black: var(--surface);
  --color-on-primary: #ffffff;
  --color-on-dark: var(--text);
  --color-error: var(--st-qc);
  --color-ok: var(--st-verified);
  --font-display: var(--font-sans);
  --font-text: var(--font-sans);
  --rounded-sm: var(--r-control);
  --rounded-md: var(--r-card);
  --rounded-lg: var(--r-card);
  --rounded-pill: 9999px;
  --space-xxs: var(--space-1);
  --space-xs: var(--space-2);
  --space-sm: var(--space-3);
  --space-md: var(--space-4);
  --space-lg: var(--space-5);
  --space-xl: var(--space-6);
  --space-xxl: var(--space-7);
  --space-section: var(--space-8);
  --content-max: 1080px;
  --content-wide: 1440px;
  --content-app: 1760px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0D1015;
    --surface: #141920;
    --surface-sunken: #10141A;
    --line: #232B35;
    --line-strong: #333D49;
    --text: #E7ECF2;
    --text-muted: #8E99A7;
    --text-faint: #6B7683;
    --accent: #5B9BDD;
    --accent-weak: #16273A;
    --st-verified: #4FB088;
    --st-review: #DCA544;
    --st-qc: #E07C6C;
    --st-limit: #C4A758;
    --st-blocked: #A28ED4;
    --series-1: #6BA8E8;
    --series-2: #56B98E;
    --series-3: #E08878;
    --series-4: #B39BE0;
    --series-5: #D9A94E;
    --series-6: #5FB8CC;
    --chart-band: rgb(142 153 167 / 0.12);
    --shadow-drawer: 0 8px 24px rgb(0 0 0 / 0.45);
    --color-on-primary: #0D1015;
  }
}

:root[data-theme="dark"] {
  --bg: #0D1015;
  --surface: #141920;
  --surface-sunken: #10141A;
  --line: #232B35;
  --line-strong: #333D49;
  --text: #E7ECF2;
  --text-muted: #8E99A7;
  --text-faint: #6B7683;
  --accent: #5B9BDD;
  --accent-weak: #16273A;
  --st-verified: #4FB088;
  --st-review: #DCA544;
  --st-qc: #E07C6C;
  --st-limit: #C4A758;
  --st-blocked: #A28ED4;
  --series-1: #6BA8E8;
  --series-2: #56B98E;
  --series-3: #E08878;
  --series-4: #B39BE0;
  --series-5: #D9A94E;
  --series-6: #5FB8CC;
  --chart-band: rgb(142 153 167 / 0.12);
  --shadow-drawer: 0 8px 24px rgb(0 0 0 / 0.45);
  --color-on-primary: #0D1015;
}