/* =========================================================================
   Lumino Forge — design tokens (rc185)
   THE single source of truth for type, space, radius, elevation, motion,
   layering and color. Nothing in the UI may hardcode these values.

   WHY THIS FILE EXISTS
   --------------------
   Measured against rc184's index.html before this landed:
     · 1,044 hardcoded px values      — no spacing or type scale
     ·    26 custom properties        — nearly all color, no system
     ·     9 ad-hoc z-index values    — no layering scale
     ·     6 tokens USED BUT NEVER DEFINED

   That last one was not theoretical. `var(--line)` appears in 11 rules as
   `border:1px solid var(--line)`. An undefined custom property makes the
   whole declaration invalid at computed-value time, so those borders were
   simply not rendering — code blocks, inline code, the files panel and the
   markdown rule have been borderless. Same for --fg, --muted, --no (and
   --good/--red, referenced in dead paths). This is precisely the class of
   defect a token system prevents by construction, and it is a real part of
   why the UI "feels off".

   SCALES
   ------
   Type and space are scales, not opinions. Pick the nearest step; never
   invent a value. If a step is missing the scale is wrong — fix it here.
   ========================================================================= */

:root {
  /* ---- type: fluid modular scale ------------------------------------
     clamp() lets a 390px phone and a 4K monitor share one scale without a
     media query. The mid term is vw-based so it breathes; the bounds stop
     it from ever becoming unreadable or cartoonish. */
  --fs-2xs:  clamp(10px, 0.60rem + 0.05vw, 11px);
  --fs-xs:   clamp(11px, 0.66rem + 0.08vw, 12px);
  --fs-sm:   clamp(12px, 0.74rem + 0.10vw, 13px);
  --fs-base: clamp(13px, 0.82rem + 0.12vw, 14.5px);
  --fs-md:   clamp(15px, 0.92rem + 0.16vw, 16.5px);
  --fs-lg:   clamp(17px, 1.02rem + 0.26vw, 20px);
  --fs-xl:   clamp(21px, 1.20rem + 0.45vw, 26px);
  --fs-2xl:  clamp(26px, 1.45rem + 0.70vw, 34px);

  --lh-tight: 1.25;
  --lh-base:  1.55;
  --lh-loose: 1.7;

  --fw-regular: 400;
  --fw-medium:  520;
  --fw-semi:    600;
  --fw-bold:    700;

  --ff-sans: "Inter", "SF Pro Text", ui-sans-serif, system-ui, "Segoe UI",
             Roboto, sans-serif;
  --ff-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---- space: 8-point scale ------------------------------------------
     Every margin, pad and gap references one of these. 1,044 magic numbers
     collapse into eight names. */
  --sp-0:  0;
  --sp-1:  2px;
  --sp-2:  4px;
  --sp-3:  8px;
  --sp-4:  12px;
  --sp-5:  16px;
  --sp-6:  24px;
  --sp-7:  32px;
  --sp-8:  48px;
  --sp-9:  64px;

  /* ---- radius --------------------------------------------------------- */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-full: 999px;

  /* ---- elevation ------------------------------------------------------
     Shadow colour comes from the theme (--shadow) so light mode is not a
     black smear. */
  --el-0: none;
  --el-1: 0 1px 3px var(--shadow);
  --el-2: 0 4px 14px var(--shadow);
  --el-3: 0 12px 38px var(--shadow);

  /* ---- motion ---------------------------------------------------------
     Three durations and two curves. Anything else is a bug. */
  --mo-fast: 120ms;
  --mo-base: 180ms;
  --mo-slow: 280ms;
  --ease:     cubic-bezier(.2, .8, .3, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* ---- layering -------------------------------------------------------
     Four named layers replace nine ad-hoc z-index values. A component that
     needs a number not on this list is telling you the layering model is
     wrong, not that it needs a 10th number. */
  --z-base:    1;
  --z-sticky:  10;
  --z-nav:     40;
  --z-overlay: 50;
  --z-toast:   60;

  /* ---- focus ----------------------------------------------------------
     One visible focus ring for the whole app (rc199 applies it everywhere). */
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
}

/* =========================================================================
   COLOR — semantic tokens.

   The palette itself (dark/light) is defined in index.html and is genuinely
   good; what was missing is a semantic layer, so components reference
   *meaning* (--surface, --edge, --danger) rather than an implementation
   detail (--panel2, --border, --bad).

   Both directions are wired below:
     · new semantic names  -> resolve to the existing palette
     · legacy names        -> the six that were never defined are now defined
   so rc185 changes no layout while making every referenced token real.
   ========================================================================= */
:root {
  /* new semantic surface + text layer */
  --surface:       var(--panel);
  --surface-2:     var(--panel2);
  --surface-3:     var(--panel3);
  --edge:          var(--border);
  --edge-strong:   var(--border2);
  --text-normal:   var(--text);
  --text-dim:      var(--dim);
  --danger:        var(--bad);
  --success:       var(--local);

  /* ---- the six that were referenced but never defined ------------------
     Each maps to the palette entry its usage clearly intended. --line is
     the important one: 11 `border:1px solid var(--line)` rules have been
     rendering with no border at all. */
  --line:   var(--border);   /* borders on code blocks, files panel, rules */
  --fg:     var(--text);     /* foreground text                            */
  --muted:  var(--dim);      /* de-emphasised text                         */
  --no:     var(--bad);      /* destructive action (delete links)          */
  --good:   var(--local);    /* affirmative                                */
  --red:    var(--bad);      /* alias of danger                            */
}

/* Reduced motion is honoured at the token level, so a component cannot opt
   out of the user's preference by accident. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --mo-fast: 0ms;
    --mo-base: 0ms;
    --mo-slow: 0ms;
  }
}