/* 欧关 Euguan design tokens -- the single source.
   Rules and reasons: docs/design-rules.md. Checks: design/checks/.
   site/brand.css and app/static/brand.css are copies of the colour/font part
   of this file; design/checks/check_tokens_sync.py lists every value they
   still differ on. Change a value HERE, run the checks, then copy.

   No web fonts, no CSS import rules, nothing from another host (docs/design-rules.md V1).
   Structure is parsed by check_contrast.py: keep one light :root block and one
   dark :root block inside @media (prefers-color-scheme: dark). */
:root {
  color-scheme: light;

  /* Type: system faces only. A real Latin face comes FIRST, so Latin runs (EUR 99, GPSR, LUCID)
     never render in YaHei's wide Latin on a Windows PC; Han characters fall through to the
     Chinese faces (conversion-flow-craft china-wechat.md section 6; docs/design-research/09 #2). */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB",
          "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", "Source Han Sans SC",
          "HarmonyOS Sans SC", "MiSans", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* Scale (px). Body 16 on phones: 15 and below is for meta text only. */
  --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-16: 16px; --fs-18: 18px;
  --fs-20: 20px; --fs-24: 24px; --fs-28: 28px; --fs-32: 32px; --fs-48: 48px;   /* 48: desktop h1 only */
  --lh-body: 1.75;      /* Han text is all full-height: needs more lead than Latin */
  --lh-heading: 1.4;
  --lh-lead: 1.7;       /* 18 px lead paragraph */
  --lh-tight: 1.25;     /* numbers, chips, buttons only */
  --measure: 38em;      /* about 38 Han characters per line at most */
  --weight-body: 400; --weight-strong: 600;   /* no 300: thin CJK strokes vanish on cheap screens */

  /* Space: 4 px grid. */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --gutter: 16px;       /* side gutter at 390 px */
  --s-9: 120px;         /* section padding, desktop */
  --s-sec-sm: 72px;     /* section padding, phone */
  --content: 1120px;    /* max content width */
  --tap: 44px;          /* minimum touch target */
  --radius: 12px; --radius-sm: 8px; --radius-chip: 999px;   /* cards 12, buttons/inputs 8, pill only for chips */

  /* Motion. Reduced to zero below. */
  --dur-fast: 120ms; --dur: 200ms; --ease: cubic-bezier(.2, 0, 0, 1);

  /* Colour, light. */
  --bg: #ffffff;             /* white page (Rick 2026-10-18: "a lot more white") */
  --surface: #ffffff;
  --surface-2: #f5f6f8;      /* the ONE grey used for grouping */
  --ink: #101a2c;
  --ink-2: #4a5568;
  --ink-3: #5f6878;          /* was #6b7484: 4,35:1 on --bg, below AA */
  --line: #e4e7ec;           /* hairlines: dividers, card edges (no shadows) */
  --line-2: #eef0f3;
  --field-line: #7d8799;     /* input/select/textarea borders: >= 3:1 (WCAG 1.4.11) */

  --brand: #0e5a6e;          /* 关青 gate teal: fills, buttons. Why this hue: docs/brand/BRAND-GUIDE.md section 2 */
  --brand-ink: #ffffff;
  --brand-soft: #e7f1f3;
  --link: #0e5a6e;
  --focus: #0e5a6e;
  --gate: #e8b54a;           /* brass tick: the mark only, always on --brand or --panel, never text */

  --bad: #b42318;  --bad-soft: #fdecea;  --bad-line: #f5c2bd;
  --warn: #8a5a00; --warn-soft: #fff4dc; --warn-ink: #5c3d00;
  --ok: #067647;   --ok-soft: #e6f6ee;
  --info: #475467; --info-soft: #eef0f3;

  /* Compliance status chips. Colour is never the only signal: every chip
     carries its word (缺失 / 待核实 / 已具备 / 不适用) and a shape glyph. */
  --st-missing-ink: var(--bad);      --st-missing-bg: var(--bad-soft);
  --st-verify-ink: var(--warn-ink);  --st-verify-bg: var(--warn-soft);
  --st-have-ink: var(--ok);          --st-have-bg: var(--ok-soft);
  --st-na-ink: var(--info);          --st-na-bg: var(--info-soft);

  --panel: #101a2c;
  --panel-ink: #ffffff;
  --panel-muted: #c3cad5;
  --panel-line: #33405a;
  --input-bg: #ffffff;
  --shadow: none;            /* hairline borders instead of shadows, at rest */
  --shadow-float: 0 8px 24px rgba(16, 26, 44, .08);   /* floating layers only (sticky bar) */
}
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; }
}