/* Design tokens — the only place raw values live (design-system rule zero).
   Derived from the Session 1 Design Brief (see PROJECT.md):
   mood "sturdy, warm, instantaneous"; world: chalkboard, crema, mint tea,
   brass trays, thermal receipt paper. */

:root {
  /* base — named for what they evoke */
  --ardoise: #26221c; /* chalkboard slate — the counter-at-night background */
  --ardoise-2: #322d25; /* raised slate — cards, rails */
  --papier: #f7f2e9; /* thermal receipt paper */
  --crema: #e4cfa3; /* espresso crema */
  --laiton: #c48a3f; /* brass tray — the money/action color */
  --menthe: #6fa287; /* mint tea — confirmation */
  --brule: #c25438; /* burnt — void/danger */
  --encre: #2b2620; /* thermal print ink */

  /* semantic — what components use */
  --bg: var(--ardoise);
  --surface: var(--ardoise-2);
  --text: var(--papier);
  --text-muted: color-mix(in srgb, var(--papier) 74%, var(--ardoise));
  --accent: var(--laiton);
  --on-accent: var(--ardoise);
  --success: var(--menthe);
  --danger: var(--brule);
  --border: color-mix(in srgb, var(--papier) 16%, var(--ardoise));
  --ticket-bg: var(--papier);
  --ticket-ink: var(--encre);
  --focus-ring: var(--crema);

  /* on-paper ink versions of the role colors — the raw hues sit under
     AA contrast on papier, so receipt-surface text mixes toward encre
     (menthe 2.5:1 → 5.2:1, laiton 2.6:1 → 4.9:1, brûlé 3.3:1 → 5.8:1) */
  --menthe-ink: color-mix(in srgb, var(--menthe) 55%, var(--encre));
  --laiton-ink: color-mix(in srgb, var(--laiton) 60%, var(--encre));
  --brule-ink: color-mix(in srgb, var(--brule) 70%, var(--encre));

  /* the mirror image of the -ink tokens above, for the app's own DARK chrome:
     raw brûlé is only 3.0:1 on --surface (and 3.5:1 on --bg), so danger TEXT
     sitting on slate mixes toward papier instead of toward encre — 5.1:1 on
     surface, 5.9:1 on bg at 65%. Use this for danger text; --danger itself
     stays the raw hue for BORDERS and fills, which carry no text-contrast
     requirement. Added 2026-07-29 with the sync journal's failure rows. */
  --danger-text: color-mix(in srgb, var(--brule) 65%, var(--papier));

  /* type — brief: display Bricolage Grotesque (chalk-sign warmth, headers only),
     body IBM Plex Sans (high x-height, tabular numerals), ticket IBM Plex Mono
     (mirrors the TM-T20X thermal print — the signature element).
     Files bundled in www/fonts/ (see @font-face below); fallback stacks
     cover the instant before they load. */
  --font-display: "Bricolage Grotesque", "Avenir Next Condensed", "Arial Narrow",
    sans-serif;
  --font-body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --font-ticket: "IBM Plex Mono", "Courier New", monospace;

  /* type scale (~1.25): 10 / 13 / 16 / 20 / 25 / 31 */
  --text-xs: 10px;
  --text-s: 13px;
  --text-m: 16px;
  --text-l: 20px;
  --text-xl: 25px;
  --text-2xl: 31px;

  /* spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* radii + elevation (sharp-ish, sturdy) */
  --radius-s: 4px;
  --radius-m: 8px;
  --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 4px 14px rgba(0, 0, 0, 0.45);
  --shadow-slot: inset 0 10px 12px -12px rgba(0, 0, 0, 0.55); /* paper emerging from the printer */

  /* touch */
  --tap-min: 44px;

  /* motion — one speed for hover/press feedback, one for sheet entrances;
     app.css zeroes both under prefers-reduced-motion */
  --speed-fast: 120ms;
  --speed-enter: 180ms;

  /* scrollbars — thin, slate-toned; the OS default light bars break the
     chalkboard surface on the dev browser and the tablet WebView alike */
  --scrollbar-thumb: color-mix(in srgb, var(--papier) 24%, var(--ardoise));
  --scrollbar-thumb-hover: color-mix(in srgb, var(--papier) 38%, var(--ardoise));
}

/* Bundled faces (offline requirement — no network fonts on the tablet).
   Files come from the pinned @fontsource packages via `npm run fonts`.
   latin-ext declared before latin so the latin file wins overlapping
   codepoints (fontsource convention); ext subsets only load when a
   glyph actually needs them. */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-latin-ext-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1EFF,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
  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: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-latin-ext-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1EFF,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  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: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-latin-ext-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1EFF,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
  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: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-latin-ext-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1EFF,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  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: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-latin-ext-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1EFF,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
  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;
}