/* Hackmuth design tokens (HCK-U01/U02).
   Approved direction: Public Sans, Driftwood paper, ink, blue main accent,
   gold secondary accent. Light is the default; dark follows the OS unless the
   viewer picks a theme (data-theme="light" | "dark" on <html>, set by ui.js).
   Every colour a component uses comes from here. */

:root {
  /* paper and ink */
  --paper: #E4DCC9;
  --paper-2: #D7CEB8;      /* panels, soft cards */
  --paper-text: #EDE7D7;   /* reading surface for piece text, a shade lighter than the page */
  --ink: #15130E;
  --ink-2: #47433A;        /* body copy on paper */
  --mute: #5A5244;         /* secondary text, 5.6:1 on paper */
  --rule: #BAB097;         /* hairlines */

  /* accents: blue is main (actions, links, focus); gold is secondary
     (counts, highlights). Gold is only ever a fill behind ink text. */
  --accent: #1D3FBF;
  --on-accent: #FFFFFF;
  --gold: #D4A02A;
  --on-gold: #15130E;

  /* status: always paired with a marker and a word, never colour alone */
  --ok: #176B43;    --ok-bg: #DCEADB;
  --wait: #7A4F00;  --wait-bg: #F2E3B8;
  --no: #9E2519;    --no-bg: #F2D5CF;
  --stale: #4A463C; --stale-bg: #E2DCCB;

  /* type */
  --font: 'Public Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.75rem;
  --text-2xl: 3.25rem;
  --text-3xl: 4.75rem;
  --measure: 60ch;

  /* space, shape, motion */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --radius: 2px;
  --rule-heavy: 4px;
  --nav-w: 264px;
  --page-pad: 56px;
  --focus: 3px solid var(--accent);
  --ease: 0.15s ease;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #121110; --paper-2: #1C1A17; --paper-text: #191714; --ink: #F2EEE4; --ink-2: #C9C3B4;
    --mute: #A29B8A; --rule: #3A362E;
    --accent: #9FB0FF; --on-accent: #0D1230; --gold: #E6B94A; --on-gold: #1A1408;
    --ok: #7FD1A2; --ok-bg: #16301F; --wait: #EBC46A; --wait-bg: #33280E;
    --no: #F29A8F; --no-bg: #3A1814; --stale: #C9C3B4; --stale-bg: #2A2722;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --paper: #121110; --paper-2: #1C1A17; --paper-text: #191714; --ink: #F2EEE4; --ink-2: #C9C3B4;
  --mute: #A29B8A; --rule: #3A362E;
  --accent: #9FB0FF; --on-accent: #0D1230; --gold: #E6B94A; --on-gold: #1A1408;
  --ok: #7FD1A2; --ok-bg: #16301F; --wait: #EBC46A; --wait-bg: #33280E;
  --no: #F29A8F; --no-bg: #3A1814; --stale: #C9C3B4; --stale-bg: #2A2722;
  color-scheme: dark;
}

@media (max-width: 760px) {
  :root {
    --page-pad: 20px;
    --text-2xl: 2.4rem;
    --text-3xl: 2.9rem;
  }
}