/* Design tokens — the ONLY place raw values live. Nothing below this file may
   use a raw hex, a raw font stack, or a raw px for these concerns. */

:root {
  /* ── Color ────────────────────────────────────────────────────────────── */
  --board:   #F4DFD2;  /* page background, futaba peach */
  --paper:   #FFF9F3;  /* card / pane surface */
  --ink:     #6B1D2B;  /* primary text */
  --ink-dim: #9A6B70;  /* secondary text, metadata */
  --edge:    #E5B39B;  /* borders, dividers */
  --sage:    #0F8A5F;  /* the reply-green; live / active affordances */
  --pop:     #FF5C7A;  /* accent; focus rings, the unread pulse */
  --danger:  #C2183B;  /* the operator's delete. Distinct from --pop, which is decorative
                          here and would make a destructive control read as an accent. */

  /* Identity dots. A throwaway name gets a stable colour so the eye can track
     one speaker down the log. Six is enough to tell a live thread's voices
     apart without turning the pane into confetti. */
  --dot-1: #0F8A5F;
  --dot-2: #C2542F;
  --dot-3: #7A5AC4;
  --dot-4: #2C7DA0;
  --dot-5: #B0353F;
  --dot-6: #8A6D1F;

  /* ── Type ─────────────────────────────────────────────────────────────── */
  --font-display: 'Zilla Slab', Georgia, serif;
  --font-body:    'Public Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.625rem;

  --leading-tight: 1.2;
  --leading-body:  1.55;

  /* ── Radii — soft corners, generously ─────────────────────────────────── */
  --radius-card: 18px;
  --radius-pane: 12px;
  --radius-pill: 999px;

  /* ── Spacing, 4px base ────────────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* ── The two critical tokens ──────────────────────────────────────────── */
  /* Each of these values appears exactly once in the whole codebase. The
     board's left offset (desktop), its top offset (mobile), and the panel's
     own size are all computed from them. Collapse is expected later, and it
     must stay a one-number change. */
  --panel-width:  220px;  /* desktop rail width */
  --panel-height: 52px;   /* mobile bar height */

  /* ── Layout ───────────────────────────────────────────────────────────── */
  --board-max: 1100px;
  --breakpoint: 768px;    /* documentary; @media cannot read a custom property */

  /* ── Blab pane ────────────────────────────────────────────────────────── */
  /* How much conversation the pane shows before it scrolls, in LINES rather than
     in spacing units — "about eight lines" is the intent, so it should be the
     number you edit. A blab is --text-sm at --leading-body, plus the row's own
     padding, and the gap between rows. */
  --blab-lines: 8;
  --blab-line: calc(var(--text-sm) * var(--leading-body) + var(--space-2) + var(--space-1));
  --blab-max: calc(var(--blab-line) * var(--blab-lines));

  /* ── Media ────────────────────────────────────────────────────────────── */
  /* The single image's height cap. Overridden per-breakpoint by re-declaring the
     token rather than max-height, because components.css loads after layout.css
     and would otherwise win the property outright. Matches --blab-max so the two
     panes line up on desktop. */
  --media-single-max: var(--blab-max);
  --media-max-mobile: 220px;                    /* the cap when the pane is on top */

  /* ── Elevation & focus ────────────────────────────────────────────────── */
  --shadow-card: 0 2px 0 var(--edge), 0 10px 24px rgba(107, 29, 43, 0.08);
  --focus-ring: 3px;
  --scrim: rgba(43, 14, 20, 0.82);   /* the lightbox backdrop */

  /* ── Stacking ─────────────────────────────────────────────────────────── */
  /* Two layers is the whole scale, and naming them is what stops the next one
     being picked by guessing a bigger number than whatever is already there. */
  --z-panel: 2;
  --z-sheet: 3;        /* the settings sheet, above the rail it rises out of */
  --z-lightbox: 100;
  --z-dialog: 110;     /* above the lightbox: a confirm has to be answerable over one */
}