/* ===========================================================================
   JAYME — DESIGN TOKENS
   ===========================================================================
   Architecture borrowed, deliberately, from the one Harvey published in
   January 2026 (see research/HARVEY_DESIGN_TEARDOWN.md). Three rules:

     1. NAME BY INTENT, NEVER BY APPEARANCE.
        `--fg-muted`, not `--grey-500`. A token records what a colour is FOR,
        so re-theming means changing one definition instead of auditing every
        call site. If you ever find yourself writing a raw hex or a primitive
        at a call site, the system has failed and the fix belongs here.

     2. EVERY NEUTRAL IS HUE-LOCKED TO THE BRAND.
        Harvey locks their neutrals near hue 90°. We lock ours to `--hue: 78`,
        which is where JAYME's gold already sits in OKLCH. Neutrals therefore
        harmonise with the brand instead of merely coexisting with it — the
        greys read as paper and ink rather than as chrome.

     3. LIGHT IS WHITE; WARMTH LIVES IN THE GOLD.
        The page is pure white and the neutrals are near-neutral (chroma ~0.005).
        An earlier pass used warm paper throughout — handsome alone, dated beside
        other software. Dark mode keeps a warm near-black, with chroma pulled
        DOWN so it never drifts brown, which is the standard failure of warm
        dark themes.

   Why OKLCH: it is perceptually uniform, so a lightness step of 4% looks like
   the same step at every hue, and holding chroma constant while moving
   lightness does not shift the apparent colour. Doing this in hex means
   eyeballing it. Supported in every browser we target.

   MIGRATION NOTE (phased, per Harvey's approach — no big-bang rewrite):
   the legacy variable names used throughout styles.css (`--app-bg`, `--text2`,
   `--hairline`, …) are ALIASED to the new tokens at the bottom of each theme
   block. Existing rules keep working untouched; new work uses the semantic
   names. Refactor old rules opportunistically, keeping component-level
   cohesion — update every button in a context, not one.
   =========================================================================== */

:root {
  /* The one number that rotates the entire product's temperature. */
  --hue: 78;

  /* ---------------- surfaces (back to front) ----------------
     White page. The earlier warm-paper base looked handsome in isolation and
     slightly dated next to a screen of white software, so the warmth now lives
     ONLY in the gold and in a barely-there tint on the sunken surfaces. Page
     and card are both pure white: cards are defined by a hairline, not by a
     fill, which is what makes a dense legal interface read as clean rather
     than as a stack of boxes. */
  --bg-base: oklch(100% 0 0);                    /* the page */
  --bg-raised: oklch(100% 0 0);                  /* cards, inputs, panels */
  --bg-overlay: oklch(100% 0 0);                 /* menus, dialogs */
  --bg-sunken: oklch(98.4% 0.002 var(--hue));    /* sidebar, wells, tracks */
  --bg-inset: oklch(96.4% 0.003 var(--hue));     /* pressed / recessed */

  /* ---------------- foreground (most to least prominent) ----------------
     Chroma pulled right down from the first pass. A near-neutral ink on white
     is what "serious" looks like; a warm ink on warm paper reads as a wedding
     invitation. */
  --fg-base: oklch(20% 0.006 var(--hue));        /* body text, headings */
  --fg-muted: oklch(44% 0.006 var(--hue));       /* secondary text */
  --fg-subtle: oklch(58% 0.005 var(--hue));      /* labels, captions */
  --fg-faint: oklch(72% 0.004 var(--hue));       /* placeholders, disabled */
  --fg-onbrand: oklch(22% 0.04 var(--hue));      /* text on a brand fill */
  --fg-oninverse: oklch(99% 0 0);                /* text on an ink fill */

  /* ---------------- borders ----------------
     On white, hairlines do all the structural work, so there are three
     deliberate weights rather than one grey used for everything. */
  --border-subtle: oklch(93.5% 0.003 var(--hue)); /* the default hairline */
  --border-base: oklch(88.5% 0.004 var(--hue));   /* table heads, dividers */
  --border-strong: oklch(74% 0.005 var(--hue));   /* focus, emphasis */

  /* ---------------- brand ----------------
     Gold, used ONCE per screen on the thing that matters. Two golds: an ink
     gold that passes contrast on paper, and a fill gold for solid buttons. */
  --brand: oklch(58% 0.115 var(--hue));
  --brand-strong: oklch(48% 0.105 var(--hue));
  --brand-fill: oklch(85% 0.135 88);
  --brand-wash: oklch(97.8% 0.018 var(--hue));  /* tinted row / selected card */

  /* ---------------- status ----------------
     Earthy, like Harvey's amber/olive/jade — no blue anywhere in this product.
     Blue reads as consumer software; claret and jade read as institutional. */
  --critical: oklch(46% 0.145 25);              /* claret, not fire engine */
  --critical-wash: oklch(97.5% 0.014 25);
  --warning: oklch(56% 0.115 65);               /* amber */
  --warning-wash: oklch(97.5% 0.016 65);
  --positive: oklch(47% 0.085 163);             /* jade */
  --positive-wash: oklch(97.5% 0.013 163);

  /* ---------------- identity ---------------- */
  /* The monogram is RULED, not filled, so it needs exactly one colour — which
     is why there is no --logo-glyph or --logo-keyline any more. */
  --logo-ink: oklch(18% 0.006 var(--hue));

  /* ---------------- elevation ----------------
     Restraint on purpose: institutional software is flat and hairlined.
     Shadows exist for things that genuinely float. */
  --shadow-sm: 0 1px 2px oklch(20% 0 0 / 0.05);
  --shadow-md: 0 4px 12px oklch(20% 0 0 / 0.07);
  --shadow-lg: 0 16px 40px oklch(20% 0 0 / 0.12);

  /* ---------------- radius ----------------
     Small. Big rounded corners are friendly; this product is not selling
     friendliness, it is selling competence. */
  --r-xs: 3px;
  --r-sm: 5px;
  --r-md: 7px;
  --r-lg: 10px;
  --r-xl: 14px;

  /* ---------------- type ----------------
     Display serif for anything a lawyer reads as a document. Grotesque for
     chrome and figures. The pairing is the whole premium signal — see the
     teardown. Fallbacks are ordered so an un-fetched font file still lands on
     a decent editorial serif (New York on macOS via ui-serif) rather than on
     Times. */
  --font-display: "Instrument Serif", ui-serif, "New York", "Iowan Old Style",
                  Palatino, "Palatino Linotype", Georgia, serif;
  --font-ui: "Inter var", Inter, -apple-system, "SF Pro Text", "Segoe UI",
             system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  --text-micro: 10.5px;
  --text-small: 11.5px;
  --text-body: 13.5px;
  --text-lead: 15px;
  --text-title: 18px;
  --text-display-sm: 22px;
  --text-display: 28px;
  --text-display-lg: 36px;

  /* Tracking: display serifs at large sizes need negative tracking; small
     uppercase labels need positive. Encoded so it is applied consistently. */
  --track-display: -0.4px;
  --track-tight: -0.15px;
  --track-label: 0.9px;
  --track-wordmark: 0.14em;   /* 0.22em looked absurd in proof — classic firm tracking is ~0.14 */

  /* ---------------- space ---------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 22px;
  --sp-6: 30px;
  --sp-7: 44px;

  /* ================= LEGACY ALIASES =================
     Everything in styles.css still speaks these names. Keep them pointed at
     the semantic tokens above and the old CSS themes correctly for free. */
  --app-bg: var(--bg-base);
  --bg2: var(--bg-sunken);
  --surface: var(--bg-raised);
  --text: var(--fg-base);
  --text2: var(--fg-muted);
  --text3: var(--fg-subtle);
  --hairline: var(--border-subtle);
  --hairline-strong: var(--border-base);
  --grid: var(--border-subtle);
  --ink-soft: var(--fg-muted);
  --on-brand: var(--fg-onbrand);
  --strong: var(--positive);
  --shadow: oklch(20% 0 0 / 0.05);
}

/* ===========================================================================
   DARK — a warm near-black, never #000.
   Pure black on a large surface reads as "phone at night", not "chambers at
   night", and it makes gold look neon. Chroma is pulled down across the board
   so the warmth stays a suggestion rather than a brown cast.
   =========================================================================== */
html[data-theme="dark"] {
  --bg-sunken: oklch(14.5% 0.004 var(--hue));
  --bg-base: oklch(17.5% 0.005 var(--hue));
  --bg-raised: oklch(21.5% 0.006 var(--hue));
  --bg-overlay: oklch(24% 0.007 var(--hue));
  --bg-inset: oklch(12% 0.004 var(--hue));

  --fg-base: oklch(95% 0.006 var(--hue));
  --fg-muted: oklch(73% 0.008 var(--hue));
  --fg-subtle: oklch(59% 0.008 var(--hue));
  --fg-faint: oklch(46% 0.007 var(--hue));
  --fg-onbrand: oklch(20% 0.045 var(--hue));
  --fg-oninverse: oklch(17% 0.01 var(--hue));

  --border-subtle: oklch(27% 0.006 var(--hue));
  --border-base: oklch(35% 0.008 var(--hue));
  --border-strong: oklch(50% 0.009 var(--hue));

  /* On dark, the ink gold disappears — brand moves up in lightness. */
  --brand: oklch(83% 0.125 85);
  --brand-strong: oklch(89% 0.115 88);
  --brand-fill: oklch(80% 0.13 85);
  --brand-wash: oklch(26% 0.035 var(--hue));

  --critical: oklch(76% 0.10 25);
  --critical-wash: oklch(26% 0.035 25);
  --warning: oklch(78% 0.10 70);
  --warning-wash: oklch(26% 0.03 70);
  --positive: oklch(76% 0.085 163);
  --positive-wash: oklch(24% 0.028 163);

  --logo-ink: oklch(94% 0.006 var(--hue));

  --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.4);
  --shadow-md: 0 4px 14px oklch(0% 0 0 / 0.45);
  --shadow-lg: 0 18px 44px oklch(0% 0 0 / 0.55);
  --shadow: oklch(0% 0 0 / 0.4);
}

/* ===========================================================================
   BASE TYPOGRAPHY
   Applied here rather than in styles.css so the type system travels with the
   tokens that define it.
   =========================================================================== */
body {
  font-family: var(--font-ui);
  font-size: var(--text-body);
  letter-spacing: var(--track-tight);
  font-feature-settings: "cv05" 1, "ss03" 1; /* Inter: single-storey l, curved r */
}

/* The serif is not decoration — it marks "this is a document". Headings,
   analyses, and computed recommendations use it; chrome never does. */
.serif, h1, h2, h3, .dec-verdict h3, .dec-sec h4, .dec-narr {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: var(--track-display);
}
h1, h2, h3 { text-wrap: balance; }

/* Figures line up in columns or they are not figures. Applied broadly on
   purpose: this product's credibility lives in its numbers. */
.num, .dec-stat .v, .dec-field input, table.dec-table td, table.dec-table th,
.runway .rv, .dec-post .pv, .money {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "cv05" 1;
}

/* Small uppercase labels need air or they read as a smudge. */
.label, .nav-group, .dec-group, .dec-stat .k, table.dec-table th,
.trust-strip .ti, .dec-verdict .lbl, .dec-audit summary {
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  font-weight: 600;
}

/* Long-form reading measure. Nothing legal should run past ~90 characters. */
.prose { max-width: 74ch; line-height: 1.62; }