/* QueueSim brand faces, self-hosted (SIL OFL, latin subset):
   Space Grotesk (display + prose), DM Mono (labels + the app), Pacifico (the script Q only). */
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/space-grotesk-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/dm-mono-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 500 700; font-display: swap; src: url(/fonts/dm-mono-500-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'DM Mono'; font-style: italic; font-weight: 400 500; font-display: swap; src: url(/fonts/dm-mono-italic-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Pacifico'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/pacifico-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ── QueueSim role tokens ──────────────────────────────────────────────
   Source: docs/brand-style-guide.md. Espresso ground, Deep Q warm band,
   Q blue accent, Caramel action. One ground only (the graphite set is retired).
   Status colors (green/amber/red) are traffic lights in the app, never brand. */
:root {
  /* palette */
  --espresso:     #141210;
  --espresso-2:   #1A1816;
  --espresso-3:   #221F1C;
  --espresso-4:   #2E2A26;
  --cream:        #F0EDE6;
  --deep-q:       #1A4F7E;   /* Deep Q, one step deeper than #1E5A8E so cream body text clears 7:1 (7.3:1) */
  --q-blue:       #4A90D9;
  --caramel:      #D4A574;

  /* roles */
  --ground:       var(--espresso);
  --ground-2:     var(--espresso-2);
  --ground-3:     var(--espresso-3);
  --ground-4:     var(--espresso-4);
  --warm:         var(--deep-q);
  --accent:       var(--q-blue);      /* 5.6:1 on espresso: links, headings, controls, focus */
  --accent-soft:  #6FA8E6;            /* accent as small text, 7.5:1 */
  --action:       var(--caramel);     /* buttons you click; espresso label 8.4:1 */
  --action-hi:    #DEB488;
  --on-action:    var(--espresso);
  --on-ground:    var(--cream);       /* 16:1 */
  --on-ground-2:  #B8B2A8;            /* body copy, 8.9:1 on espresso, 7.8:1 on espresso-3 */
  --on-ground-3:  #948E84;            /* labels and captions only, 5.7:1 */
  --on-warm:      var(--cream);       /* 7.3:1 on Deep Q */
  --rule:         rgba(240,237,230,0.12);
  --rule-strong:  rgba(240,237,230,0.22);

  /* status (app only) */
  --green:        #4ADE80;
  --amber:        #FBBF24;
  --red:          #F87171;
  --purple:       #A78BFA;

  --font-display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-text:    'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-script:  'Pacifico', cursive;
  --radius:       14px;

  /* legacy page tokens, mapped onto the roles */
  --ink: var(--on-ground); --paper: var(--ground);
  --accent2: var(--accent); --teal: var(--accent); --blue-lt: var(--accent-soft);
  --muted: var(--on-ground-3);
  --border: var(--rule);
  --surface: rgba(240,237,230,0.04);
  --bg0: var(--ground); --bg1: var(--ground-2); --bg2: var(--ground-3); --bg3: var(--ground-4);
  --text: var(--on-ground); --text-dim: var(--on-ground-2); --text-faint: var(--on-ground-3);
  color-scheme: dark;
}