/* ═══════════════════════════════════════════════════════════════
   LL DESIGN SYSTEM — TOKENS
   Blueprint / neo-brutalist. Mono-only. Sharp corners. No shadows.
   Depth = borders + tonal layering. Hierarchy = size, weight, rules.
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;400;500;700&display=swap');

:root {
  /* ── 0. GLOBAL SCALE — one dial for the whole page ──────────────
     Every type size, space token and max-width below is expressed in
     rem, so this single value rescales the entire layout: type, space,
     content width, and therefore how much air is left in the side
     margins. 100% = 16px baseline. 90% = 14.4px.
     Rule widths stay in px on purpose — a scaled hairline lands on a
     fractional device pixel and renders soft or drops out entirely,
     and the 1px rule is the whole structural language here.
     ───────────────────────────────────────────────────────────── */
  font-size: 90%;

  /* ── 1. PRIMITIVES — the whole palette, nothing else ────────── */
  --ink-900:      #101010;   /* sunken bands only (footer, contrast strips) */
  --ink-800:      #181818;   /* THE surface. Brand primary. */
  --paper:        #FFFFFF;
  --signal:       #FED700;   /* functional indicator. Never decorative. */

  /* ── 2. SEMANTIC — surfaces ─────────────────────────────────── */
  --bg:           var(--ink-800);
  --bg-sunken:    var(--ink-900);
  --bg-raised:    rgba(255,255,255,0.030);  /* panels, cards      */
  --bg-raised-hi: rgba(255,255,255,0.055);  /* hover / active row */
  --bg-signal-wash: rgba(254,215,0,0.06);   /* highlighted panel  */

  /* ── 3. SEMANTIC — foreground ───────────────────────────────── */
  --fg:           var(--paper);              /* headings, primary  */
  --fg-body:      rgba(255,255,255,0.72);    /* paragraphs         */
  --fg-muted:     rgba(255,255,255,0.50);    /* labels, captions   */
  --fg-dim:       rgba(255,255,255,0.32);    /* placeholders, meta */
  --fg-signal:    var(--signal);
  --fg-on-signal: var(--ink-800);            /* text on yellow     */

  /* ── 4. SEMANTIC — rules (the structural language) ──────────── */
  --rule:         rgba(255,255,255,0.12);    /* grid guide  (10-15%) */
  --rule-hi:      rgba(255,255,255,0.24);    /* hover / emphasis     */
  --rule-active:  var(--paper);              /* active structural    */
  --rule-signal:  var(--signal);             /* focus / selected     */
  --rule-w:       1px;
  --rule-w-heavy: 2px;

  /* ── 5. TYPE — one family, always. Never uppercase. ─────────── */
  --font: 'Roboto Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --w-light:  300;
  --w-reg:    400;
  --w-med:    500;
  --w-bold:   700;

  /* Mono is wide — sizes run smaller and tracking tighter than a
     proportional face at the same optical weight. */
  --t-display:    clamp(2.125rem, 5.2vw, 3.75rem); /* 34 → 60 */
  --t-h1:         clamp(1.625rem, 3.4vw, 2.375rem);/* 26 → 38 */
  --t-h2:         1.375rem;  /* 22 */
  --t-h3:         1rem;      /* 16 */
  --t-body-lg:    1.0625rem; /* 17 */
  --t-body:       0.9375rem; /* 15 */
  --t-body-sm:    0.875rem;  /* 14 */
  --t-label:      0.75rem;   /* 12 */
  --t-micro:      0.6875rem; /* 11 */

  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-normal: 1.45;
  --lh-loose:  1.65;

  --ls-display: -0.03em;
  --ls-head:    -0.02em;
  --ls-normal:   0;
  --ls-label:    0.04em;   /* replaces the old uppercase treatment */
  --ls-micro:    0.06em;

  /* ── 6. SPACE — 8px rhythm, in rem so it follows the scale ──── */
  --s-xs:  0.25rem;        /* 4  */
  --s-sm:  0.75rem;        /* 12 */
  --s-md:  1.5rem;         /* 24 */
  --s-lg:  3rem;           /* 48 */
  --s-xl:  5rem;           /* 80 */
  --gutter: 1.5rem;        /* 24 */
  --margin: 2rem;          /* 32 — page side padding, desktop */
  --margin-sm: 1.25rem;    /* 20 — page side padding, mobile  */
  --maxw: 80rem;           /* 1280 */
  --header-h: 4rem;        /* 64 — fixed header, anchors offset from it */

  /* ── 7. SHAPE + MOTION ──────────────────────────────────────── */
  --radius: 0;             /* non-negotiable */
  --bracket: 0.875rem;     /* 14 — L-frame arm length */
  --offset: 0.25rem;       /* 4  — ghost-outline displacement on buttons */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 0.15s;
  --dur:      0.2s;

  /* ── 8. GRID BACKDROP ───────────────────────────────────────── */
  --grid-size: 4rem;       /* 64 */
  --grid-opacity: 0.04;
}

/* Light-mode inversion. The system is dark-first; this keeps a
   published page legible if a viewer forces light. Same tokens,
   swapped roles — signal yellow never changes. */
:root[data-theme="light"] {
  --bg:           #F4F4F4;
  --bg-sunken:    #EAEAEA;
  --bg-raised:    rgba(0,0,0,0.030);
  --bg-raised-hi: rgba(0,0,0,0.055);
  --fg:           var(--ink-800);
  --fg-body:      rgba(24,24,24,0.78);
  --fg-muted:     rgba(24,24,24,0.55);
  --fg-dim:       rgba(24,24,24,0.35);
  --rule:         rgba(24,24,24,0.14);
  --rule-hi:      rgba(24,24,24,0.28);
  --rule-active:  var(--ink-800);
}