/* ─────────────────────────────────────────────────────────────
   LexOps · Design Tokens (v3 · breathing room)
   Dark, instrumented surface. Brand: deep navy field with a
   violet→cyan gradient lifted from the LexOutLoud mark.
   Colors are FUNCTIONAL, not persona-bound:
     cyan   → primary system / action / highlight
     violet → secondary brand (gradient counterpart)
     amber  → warning · open question · attention
     green  → success · resolved · healthy

   v3 changes:
   • Type floors raised. Body 16/1.65. Metadata 11px mono (was 8–9).
     Captions never below 12. Aligned to WCAG body-text guidance.
   • `--text-mute` lifted from #1e3450 (≈1.6:1) to #6a8aa4 (≈7.5:1).
     Metadata is now legible, not invisible.
   • Type-scale + spacing scale tokens added so screens stop
     inventing one-off sizes.
   ───────────────────────────────────────────────────────────── */

:root {
  /* ── SURFACES ─────────────────────────────────────────── */
  --bg:           #050810;             /* page floor — deepest */
  --bg2:          #080d18;             /* one step up */
  --bg3:          #0c1220;             /* inset surfaces, tracks */
  --panel:        rgba(8,13,24,0.85);  /* side panels, frosted */

  /* ── LINES ────────────────────────────────────────────── */
  --border:       rgba(80,140,200,0.12);
  --border2:      rgba(80,140,200,0.06);

  /* ── BRAND / ACCENTS ─────────────────────────────────── */
  --cyan:         #4fb8d4;   /* primary action · highlight */
  --cyan-dim:     rgba(79,184,212,0.15);
  --cyan-glow:    rgba(79,184,212,0.06);

  --violet:       #9b7fd4;   /* secondary brand — pairs with cyan in the gradient */
  --violet-dim:   rgba(155,127,212,0.12);

  /* the brand gradient — top:violet → bottom:cyan, matching the logo */
  --grad-brand:   linear-gradient(180deg, #9b7fd4 0%, #4fb8d4 100%);

  /* ── STATE COLORS ────────────────────────────────────── */
  --amber:        #c8a96e;   /* warning · attention · open question */
  --amber-dim:    rgba(200,169,110,0.12);

  --green:        #3db87a;   /* success · resolved · healthy */
  --green-dim:    rgba(61,184,122,0.12);

  /* ── TEXT ─────────────────────────────────────────────── */
  --text:         #d4e4ec;   /* primary body / headings (was c8dce8) */
  --text-soft:    #b0ccd8;   /* message body — half-step lighter than dim */
  --text-dim:     #7a96a8;   /* labels, helper, recall (was 4a6a80) */
  --text-mute:    #6a8aa4;   /* metadata, mono keys, timestamps (was 1e3450 — invisible) */

  /* ── TYPE FAMILIES ────────────────────────────────────── */
  --sans:         'Syne', sans-serif;
  --mono:         'JetBrains Mono', monospace;
  --serif:        'Instrument Serif', serif;

  /* ── TYPE SCALE ───────────────────────────────────────── */
  /* Body text never below 16. Captions never below 12.
     Mono metadata sits at 11–12 — legible at a glance. */
  --fs-display:   40px;   /* page-level display, h1 */
  --fs-title:     22px;   /* section titles, window title */
  --fs-subtitle:  18px;   /* sub-section, group titles */
  --fs-body:      16px;   /* body / message body — floor */
  --fs-body-sm:   14px;   /* dense body, secondary copy */
  --fs-caption:   13px;   /* captions, helper text — never below 12 */
  --fs-label:     12px;   /* mono section labels, button text */
  --fs-meta:      11px;   /* mono metadata, timestamps */

  --lh-tight:     1.2;
  --lh-snug:      1.45;
  --lh-body:      1.65;   /* body default */
  --lh-roomy:     1.75;

  --ls-mono-tight: 0.06em;
  --ls-mono:       0.12em;
  --ls-mono-wide:  0.2em;   /* uppercase section labels */

  /* ── SPACING SCALE (4px base) ─────────────────────────── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  32px;
  --sp-8:  40px;
  --sp-9:  56px;
  --sp-10: 72px;

  /* ── RADII ────────────────────────────────────────────── */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;

  /* ── ELEVATION ────────────────────────────────────────── */
  --glow-cyan:   0 0 6px var(--cyan);
  --glow-amber:  0 0 6px var(--amber);
  --glow-violet: 0 0 6px var(--violet);
  --glow-green:  0 0 6px var(--green);
}

/* ── RESETS ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}