/* Spot Cheque design tokens.
   The only file in this repo permitted to contain a colour value.
   Direction A, selected 27 Aug 2026. Supersedes the warm-paper palette,
   kept at tokens.css.warm-paper.bak. See DESIGN.md. */

:root {
  /* ── Ground ─────────────────────────────────────────────
     Two grounds, not one. White carries evidence, black carries argument.
     There is no third ground and no tint of either. */
  --white:        #FFFFFF;
  --black:        #0B0B0C;

  /* ── Ink ────────────────────────────────────────────────
     -2 is secondary text. -3 is furniture: slide numbers, footers, captions.
     Both meet WCAG AA at 16px on their own ground. */
  --ink-2:        #5A5A5E;   /* 7.0:1 on white */
  --ink-3:        #6E6E72;   /* 5.3:1 on white */
  --ink-2-inv:    #9C9CA2;   /* 7.1:1 on black */
  --ink-3-inv:    #8A8A90;   /* 5.6:1 on black */

  /* ── Rules ──────────────────────────────────────────────
     Lines only. Never used for text — that was the defect in the previous
     palette and it is not to be reintroduced. */
  --rule:         #E2E2E0;
  --rule-inv:     #2E2E31;
  --rule-strong:  #A9A9A6;

  /* ── The one accent ─────────────────────────────────────
     Red means cost, or the single focal object on a slide. Never decoration.
     Never twice on one slide for two different reasons. */
  --red:          #D6111B;


  /* ── Screen chrome ──────────────────────────────────────
     The surround behind the slide stack when the deck is read in a browser.
     Never printed, never appears on a slide. Not part of the palette. */
  --surround:     #3A3A3C;

  /* ── Type ───────────────────────────────────────────────
     Free stack. A licensed mono is a later token swap, not a redesign. */
  --font-sans:  'IBM Plex Sans', system-ui, sans-serif;   /* display + body  */
  --font-mono:  'IBM Plex Mono', ui-monospace, monospace; /* every figure    */
  --font-serif: 'Source Serif 4', Georgia, serif;         /* pull prose only */

  /* ── Scale (deck) ───────────────────────────────────────
     The site will need a smaller parallel set derived from this. */
  --size-1: 13px;   --size-2: 15px;   --size-3: 17px;   --size-4: 19px;
  --size-5: 22px;   --size-6: 27px;   --size-7: 36px;   --size-8: 42px;
  --size-9: 58px;   --size-10: 104px; --size-11: 150px;

  /* Text inside a drawing sits on its own scale — diagram text is set at the
     size the drawing needs, not the size the slide needs (DESIGN.md §6 r7). */
  --dsize-1: 15px;  --dsize-2: 19px;  --dsize-3: 24px;  --dsize-4: 32px;
  --dsize-5: 44px;

  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 24px;  --space-6: 32px;  --space-7: 48px;  --space-8: 64px;
  --space-9: 96px;  --space-10: 140px;

  /* ── Geometry ───────────────────────────────────────────
     Rounded fintech, chosen by Joe 2026-10-03 (DESIGN.md, Decision log).
     Supersedes "nothing is rounded". Cards 12–16px, controls 10px, chips and
     buttons pill. No radius above 16px except the pill. Nothing has a
     gradient. Depth is the two short shadows below, never a glow.
     The deck (src/deck/) does not read these yet; it stays square until it
     is re-skinned. */
  --radius-sm:    10px;    /* inputs, small controls, the contract-note card */
  --radius:       12px;    /* default card */
  --radius-lg:    16px;    /* large panels, the hero card */
  --radius-pill:  999px;   /* buttons, chips, the spread bar track */
  --border: 1px solid var(--rule);
  --stroke: 1.5px;         /* every illustration line, without exception */

  /* ── Signature ──────────────────────────────────────────
     The spread bar: a rule that is mostly market and ends in the part the
     client was charged. 8.4% is the red segment at deck scale. */
  --spread-red: 8.4%;
}

/* ── Brand surfaces, rounded fintech (2026-10-03) ─────────────
   Light-first, optional dark via prefers-color-scheme. Every value below is
   mixed from the palette above: no new hue, no tint toward warm or cool
   (chroma 0). Used by the site; the deck and the CRM do not read them.
   Shadow blur stays under 8px — scripts/audit.mjs reads these and fails the
   build on a blur of 8px or more. */
:root {
  --ground:          color-mix(in oklab, var(--white), var(--black) 3.5%);
  --surface:         var(--white);
  --surface-2:       color-mix(in oklab, var(--white), var(--black) 5%);
  --ink:             var(--black);
  --ink-soft:        var(--ink-2);
  --ink-faint:       var(--ink-3);
  --hairline:        color-mix(in oklab, var(--white), var(--black) 11%);
  --edge:            color-mix(in oklab, var(--white), var(--black) 48%);   /* input boundary, 3:1+ */
  --cost-ink:        var(--red);
  --cost-tint:       color-mix(in oklab, var(--red) 9%, transparent);
  --invert:          var(--black);       /* the one dark panel per page */
  --invert-ink:      var(--white);
  --depth-tint:           color-mix(in oklab, var(--black) 7%, transparent);
  --depth-tint-2:         color-mix(in oklab, var(--black) 9%, transparent);
  --shadow-1: 0 1px 2px var(--depth-tint);
  --shadow-2: 0 1px 2px var(--depth-tint), 0 4px 6px -2px var(--depth-tint-2);
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground:        var(--black);
    --surface:       color-mix(in oklab, var(--black), var(--white) 6%);
    --surface-2:     color-mix(in oklab, var(--black), var(--white) 10%);
    --ink:           var(--white);
    --ink-soft:      var(--ink-2-inv);
    --ink-faint:     var(--ink-3-inv);
    --hairline:      color-mix(in oklab, var(--black), var(--white) 15%);
    --edge:          color-mix(in oklab, var(--black), var(--white) 50%);
    --cost-ink:      color-mix(in oklab, var(--red), var(--white) 32%);   /* 4.5:1+ on dark */
    --cost-tint:     color-mix(in oklab, var(--red) 20%, transparent);
    --invert:        color-mix(in oklab, var(--black), var(--white) 12%);
    --invert-ink:    var(--white);
    --depth-tint:         color-mix(in oklab, var(--black) 55%, transparent);
    --depth-tint-2:       color-mix(in oklab, var(--black) 65%, transparent);
  }
}