/* ============================================================
   BEORA · DESIGN TOKENS · CSS Custom Properties
   Rev 01 · 2026.04.27
   ----
   Drop into your :root or import directly. These are the
   ONLY tokens — semantic role assignments at the bottom.

   See: https://beora.care/brand/color
   ============================================================ */

:root {
  /* ── Type stack ──────────────────────────────────────── */
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-brand:   "Gambarino", "Fraunces", ui-serif, serif;
  --font-ui:      "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;
  --font-wiki:    "Newsreader", Georgia, serif;
  --font-serif:   "Fraunces", "Newsreader", Georgia, serif;

  /* ── Neutrals (ink → bone) ───────────────────────────── */
  --ink:    #0B0B0F;
  --ink-2:  #1E1E24;
  --ink-3:  #5A5A64;
  --ink-4:  #A3A3AC;
  --ink-5:  #D4D4D8;
  --bone:   #FAFAF7;
  --bone-2: #F2F2EE;
  --bone-3: #E8E8E3;
  --paper:  #FFFFFF;

  /* ── Coral (human, warmth, mascot) ───────────────────── */
  --coral:      #E06148;
  --coral-deep: #B84830;
  --coral-tint: #FCE9E3;

  /* ── Iodine (agent, system, live signal) ─────────────── */
  --iodine-50:  #F4F6D2;
  --iodine-200: #E4EC5C;
  --iodine-500: #C8D900;
  --iodine-700: #7A8A00;
  --iodine-900: #1F2600;
  --iodine-ink: #D8E820; /* iodine that reads on near-black */

  /* ── Signal palette (clinical state) ─────────────────── */
  --signal-ok:   #0B7A3B;
  --signal-warn: #C67A00;
  --signal-crit: #B3261E;

  /* ── Lines ───────────────────────────────────────────── */
  --line: var(--ink);
  --hair: var(--ink-5);

  /* ── Semantic role assignments ───────────────────────── */
  /* IODINE leads — the agent, the system, the live signal. */
  /* CORAL supports — human, warmth, mascot only.           */
  --accent:        var(--iodine-700);   /* readable iodine on bone */
  --accent-bright: var(--iodine-200);   /* glow on dark surfaces */
  --accent-fill:   var(--iodine-500);   /* solid blocks */
  --accent-tint:   var(--iodine-50);    /* tint backgrounds */
  --support:       var(--coral-deep);   /* coral, demoted */

  /* ── Spacing scale (4-base) ──────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ── Radii ───────────────────────────────────────────── */
  --radius-sharp: 0px;     /* spec sheet, wiki chrome */
  --radius-sm:    4px;     /* tags, inline chips */
  --radius-md:    8px;     /* buttons, inputs */
  --radius-lg:    12px;    /* cards (web) */
  --radius-xl:    20px;    /* iOS bubbles */
  --radius-pill:  999px;

  /* ── Type scale (display) ────────────────────────────── */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   22px;
  --text-xl:   28px;
  --text-2xl:  40px;
  --text-3xl:  64px;
  --text-4xl:  96px;
}