/* ============================================================
   Skof design tokens — the single source of truth.
   Component CSS (styles.css) consumes these and nothing else.

   Palette: "counting the float at close" — warm ink, receipt
   paper, one brass accent, green reserved for earnings/success,
   ember for deductions/errors. Dark is the default theme
   (restaurants are dim; the app is used at 23:30); light is a
   warm-paper daylight variant behind [data-theme="light"].

   Chart series (--chart-1..3) are validated for CVD separation,
   lightness band, chroma and 3:1 surface contrast in BOTH modes
   (dataviz six-checks validator) — do not eyeball replacements.
   ============================================================ */

/* Display face for headings and every rand amount. Variable
   weight 300–700, latin subset only (~22 KB), self-hosted so the
   PWA works offline and no third-party request is made. */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 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;
}

:root,
:root[data-theme='dark'] {
  /* ---- Core palette (named) ---- */
  --ink: #161310;         /* base background — warm espresso black */
  --ink-well: #100e0b;    /* recessed wells: inputs, chart beds */
  --ink-raised: #201c17;  /* cards, dockets, surfaces */
  --ink-lifted: #2a241c;  /* highest surfaces: dialogs, tooltips */
  --paper: #efe9de;       /* primary text — receipt paper */
  --brass: #c9973b;       /* THE accent: actions, active nav, the R */
  --rand-green: #5fad73;  /* earnings & success only */
  --ember: #d96a54;       /* deductions, negatives, errors */

  /* ---- Derived / semantic ---- */
  --bg: var(--ink);
  --bg-well: var(--ink-well);
  --surface: var(--ink-raised);
  --surface-high: var(--ink-lifted);
  --border: #2e2820;
  --border-strong: #443b2e;
  --text: var(--paper);
  --text-muted: #a69c89;
  --text-faint: #7a7061;      /* decorative only — below AA */
  --accent: var(--brass);
  --accent-bright: #ddaf55;   /* hover / active brass */
  --on-accent: #1a1407;
  --positive: var(--rand-green);
  --negative: var(--ember);
  --danger-strong: #e2836f;
  --focus-ring: var(--accent-bright);
  --scrim: rgba(10, 8, 6, 0.6);
  --header-bg: rgba(22, 19, 16, 0.88);

  /* ---- Charts (validated trio: amber, blue, rose) ---- */
  --chart-1: #b5822b;
  --chart-1-hover: #c9973b;
  --chart-2: #4e86c8;
  --chart-2-hover: #6699d4;
  --chart-3: #c4708f;
  --chart-3-hover: #d383a0;
  --chart-grid: rgba(239, 233, 222, 0.07);
  --chart-tick: var(--text-muted);

  /* ---- Type ---- */
  --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, Helvetica, Arial, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
    Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', Consolas,
    monospace;
  --fs-xs: 0.72rem;
  --fs-sm: 0.8125rem;
  --fs-base: 0.9375rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.6rem;
  --fs-hero: clamp(2.7rem, 14vw, 3.6rem);

  /* ---- Space / radius / elevation ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-full: 999px;
  --elev-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --elev-2: 0 4px 10px rgba(0, 0, 0, 0.35), 0 16px 32px -18px rgba(0, 0, 0, 0.6);

  /* ---- Motion ---- */
  --t-press: 120ms;
  --t-quick: 200ms;
  --t-settle: 700ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.3, 1);
  --ease-settle: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- Docket (signature element) ---- */
  --serration: 7px;               /* tooth size of the torn edge */
  --tear: 1px dashed var(--border-strong);

  /* ---- Layout ---- */
  --app-max: 480px;
  --tabbar-h: 4rem;
}

:root[data-theme='light'] {
  --ink: #f2ede3;
  --ink-well: #e9e1d2;
  --ink-raised: #fbf8f1;
  --ink-lifted: #ffffff;
  --paper: #221c14;
  --brass: #8f6a1e;
  --rand-green: #2f7a49;
  --ember: #b04a36;

  --border: #ddd3c0;
  --border-strong: #c3b69c;
  --text-muted: #6b6151;
  --text-faint: #948a77;
  --accent-bright: #755716;
  --on-accent: #fffdf7;
  --danger-strong: #963a28;
  --focus-ring: #8f6a1e;
  --scrim: rgba(46, 38, 26, 0.4);
  --header-bg: rgba(242, 237, 227, 0.88);

  --chart-grid: rgba(34, 28, 20, 0.08);
  --elev-1: 0 1px 2px rgba(60, 48, 30, 0.08);
  --elev-2: 0 4px 10px rgba(60, 48, 30, 0.08), 0 16px 32px -18px rgba(60, 48, 30, 0.25);
}