/* tokens.css — the site's design tokens, the one source (D1 audit docs/논의/2026-09-26-시각-감사-토큰.md §5; D3 2026-09-26).
   Names after shadcn/ui (background/foreground, muted, border, input, primary, accent, ring, radius); no library. Read two ways:
   render.mjs inlines this file into templates/page.html at {{tokens}} (and takes the theme-color metas and the favicon fill from
   --background / --accent here); the four static pages link it as /tokens.css. Colours: the light block, then the dark pair twice
   (the system setting unless data-theme="light"; data-theme="dark"). test/tokens.test.mjs holds every colour in the site to this file. */
:root{
  color-scheme:light;
  --background:#ffffff; --foreground:#0b0b0c;
  --muted:#f4f4f6; --muted-foreground:#6b6b70;      /* 5.30:1 on background, 4.83:1 on muted */
  --border:#ebebee; --input:#e4e4e8;
  --primary:#0b0b0c; --primary-foreground:#ffffff;  /* the selected chip, the main button */
  --accent:#ff3b30;                                 /* brand red: the dot, ranks 1-3, a pressed thumb */
  --accent-text:#d93025;                            /* red for small text: 4.77:1 */
  --ring:#0b0b0c;
  --popover:#ffffff; --overlay:rgb(11 11 12 / .32);  /* the board's menu, sheet and dialogs; the scrim under a dialog */
  --shadow-pop:0 8px 28px rgb(0 0 0 / .12);         /* the board's menu */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --radius-xs:4px; --radius-sm:8px; --radius:12px; --radius-full:999px;
  --text-xs:12px; --text-sm:13px; --text-base:15px; --text-prose:16px; --text-lg:17px; --text-xl:24px; --text-brand:28px;
  --leading-tight:1.35; --leading:1.5; --leading-prose:1.7;
  --font:-apple-system,BlinkMacSystemFont,"Pretendard","Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;
  --tab-h:40px; --chip-h:32px; --chip-px:14px; --hit:44px; /* a platform tab's height (nav row 1); a chip's visible height and side padding (row 2); the smallest tap area */
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  color-scheme:dark;
  --background:#0b0b0c; --foreground:#f5f5f7; --muted:#1c1c1f; --muted-foreground:#9a9aa0;
  --border:#232327; --input:#2c2c30; --primary:#f5f5f7; --primary-foreground:#0b0b0c;
  --accent:#ff453a; --accent-text:#ff453a; --ring:#f5f5f7;
  --popover:#1c1c1f; --overlay:rgb(0 0 0 / .6); --shadow-pop:0 8px 28px rgb(0 0 0 / .5);
}}
:root[data-theme=dark]{
  color-scheme:dark;
  --background:#0b0b0c; --foreground:#f5f5f7; --muted:#1c1c1f; --muted-foreground:#9a9aa0;
  --border:#232327; --input:#2c2c30; --primary:#f5f5f7; --primary-foreground:#0b0b0c;
  --accent:#ff453a; --accent-text:#ff453a; --ring:#f5f5f7;
  --popover:#1c1c1f; --overlay:rgb(0 0 0 / .6); --shadow-pop:0 8px 28px rgb(0 0 0 / .5);
}