/* ══════════════════════════════════════════════════════════════════
   jakelmuller.com — design tokens

   Light enterprise brief. Scene: a hospital CIO or hiring director
   reading this on a work laptop under office light, between meetings.
   They need credibility, clarity, and proof, not atmosphere.

   Cool paper (not cream). Deep navy signal (not teal, not purple,
   not copper drama). One ink band for metrics only.
   ══════════════════════════════════════════════════════════════════ */

:root {
  /* ── surfaces ─────────────────────────────────────────────────── */
  --field:        oklch(0.985 0.004 250);
  --field-deep:   oklch(0.965 0.006 250);
  --field-raise:  oklch(0.972 0.005 250);

  /* ── ink ──────────────────────────────────────────────────────── */
  --text:         oklch(0.24 0.028 255);
  --text-dim:     oklch(0.45 0.022 255);
  --text-faint:   oklch(0.58 0.016 255);

  /* ── signal: deep navy, restrained ────────────────────────────── */
  --line:         oklch(0.38 0.095 255);
  --line-hi:      oklch(0.32 0.11 255);
  --line-quiet:   oklch(0.90 0.012 250);
  --line-ghost:   oklch(0.935 0.008 250);

  --signal:       var(--line);

  /* ── danger: form errors only (not brand) ─────────────────────── */
  --danger:       oklch(0.48 0.14 25);
  --danger-soft:  oklch(0.94 0.03 25);

  /* ── type ─────────────────────────────────────────────────────── */
  --display: "Archivo", "Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif;
  --sans:    "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system,
             "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --t-display: clamp(2.25rem, 4.2vw, 3.75rem);
  --t-h1:      clamp(1.85rem, 3.2vw, 2.75rem);
  --t-h2:      clamp(1.4rem, 2.3vw, 1.95rem);
  --t-h3:      1.2rem;
  --t-body:    1.0625rem;
  --t-small:   0.9375rem;
  --t-label:   0.6875rem;

  --track-label: 0.11em;
  --track-tight: -0.028em;

  --measure:      68ch;
  --measure-lede: 56ch;

  /* Headings are measured as a share of the section they introduce, not as
     an absolute character count. A 20ch title above a 1310px table read as
     26% the width of the thing it was heading, which is what made section
     openers look squished into the left margin while their content ran
     edge to edge. The ch cap still stops a heading running to a silly
     length on an ultrawide monitor; the percentage keeps it in proportion
     everywhere else. */
  --measure-title: min(38ch, 60%);
  --measure-h2:    min(34ch, 56%);

  /* ── space ────────────────────────────────────────────────────── */
  --grid:  40px;
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   20px;
  --s-5:   32px;
  --s-6:   52px;
  --s-7:   80px;
  --s-8:   128px;

  --gutter: clamp(1.375rem, 4.5vw, 5rem);
  --maxw:   1480px;
  --section-y: clamp(3.75rem, 9vw, 7.5rem);
  --rail-h: 68px;

  --hair: 1px;
  --radius: 2px;

  /* ── motion ───────────────────────────────────────────────────── */
  --ease:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --d-fast:    180ms;
  --d-base:    340ms;
  --d-slow:    620ms;
}

/* ── mode: ink (metrics / results band only) ────────────────────── */

.mode-ink {
  --field:       oklch(0.22 0.03 255);
  --field-deep:  oklch(0.18 0.028 255);
  --field-raise: oklch(0.26 0.03 255);

  --text:        oklch(0.96 0.006 250);
  --text-dim:    oklch(0.78 0.014 250);
  --text-faint:  oklch(0.62 0.016 250);

  --line:        oklch(0.78 0.08 250);
  --line-hi:     oklch(0.88 0.06 250);
  --line-quiet:  oklch(0.34 0.025 255);
  --line-ghost:  oklch(0.30 0.022 255);

  background: var(--field);
  color: var(--text);
}

@media (prefers-reduced-motion: reduce) {
  :root { --d-fast: 0ms; --d-base: 0ms; --d-slow: 0ms; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}