/**
 * tokens.css — AEW Platform design tokens
 * ─────────────────────────────────────────────────────────
 * Graphite with one molten-orange accent. Owner decision, 2026-09-10 for
 * the landing page, extended to every signed-in surface on 2026-09-11 so
 * the site stops turning green the moment you sign in.
 *
 * Token NAMES predate the palette and were kept so no stylesheet had to be
 * rewritten; their ROLES changed:
 *   --ink-900   primary text on graphite (was: dark text on white)
 *   --surface   graphite panel            (was: white)
 *   --emerald   the orange accent         (was: emerald)
 *
 * White on this orange is 2.9:1 and fails WCAG AA. Anything filled with
 * the accent carries --on-accent, a near-black, as its text.
 *
 * index.html keeps its own copy of these values in its :root block; keep
 * the two in step.
 *
 * The DENSE scale below is for data surfaces (the costing tools). Marketing
 * pages use the roomier --sp-* scale; tables and breakdowns use --d-*.
 */

:root{
  /* Native controls (select menus, date pickers, autofill) follow this, not
     the CSS colours, and default to light: dark text on a graphite field. */
  color-scheme:dark;
  /* ── Ink ─────────────────────────────────────────────────── */
  --ink-950:#0a0b0d;   /* deepest ground: mastheads, overlays */
  --ink-800:#1b1e23;
  --ink-700:#15171b;
  --ink-900:#eceef1;   /* primary text */
  --ink-600:#b6bcc5;   /* secondary text */
  --ink-500:#9097a2;   /* muted text */
  --ink-400:#858b96;   /* faintest text still clearing AA on --surface-2 */
  --ink-200:#24272d;   /* hairlines, borders */
  --ink-100:#16181c;   /* subtle fills */
  --surface:#0e0f12;   /* panels, inputs */
  --surface-2:#121418; /* page ground on data surfaces */

  /* ── Accent ──────────────────────────────────────────────── */
  --emerald:#ff7a1a;
  --emerald-l:rgba(255,122,26,.10);
  --emerald-d:#ffa15a; /* accent as TEXT on graphite, and hover fill */
  --emerald-m:#ff8f3a;
  --on-accent:#140a04;
  /* No second accent. What was blueprint blue is neutral steel now. */
  --blueprint:#9aa4b2;
  --blueprint-l:rgba(255,255,255,.04);
  --blueprint-m:#c3cad4;

  /* Status colours stay semantic, lifted to read on graphite. */
  --amber:#f59e0b;
  --amber-l:rgba(245,158,11,.10);
  --red:#f87171;
  --red-l:rgba(248,113,113,.10);

  --on-dark:#f4f5f7;
  --on-dark-muted:rgba(244,245,247,.68);
  --on-dark-faint:rgba(244,245,247,.54);
  --on-dark-border:rgba(255,255,255,.10);

  /* ── Radius ──────────────────────────────────────────────── */
  --r2:2px;--r4:4px;--r8:8px;--r12:12px;

  /* ── Spacing — marketing ─────────────────────────────────── */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;
  --sp-6:32px;--sp-7:48px;--sp-8:64px;

  /* ── Spacing — dense data surfaces ───────────────────────── */
  --d-1:2px;--d-2:4px;--d-3:6px;--d-4:8px;--d-5:12px;
  --d-6:16px;--d-7:24px;--d-8:32px;

  /* ── Type ────────────────────────────────────────────────── */
  --fs-xs:12px;--fs-sm:13px;--fs-base:16px;--fs-md:17px;--fs-lg:19px;
  --fs-h4:clamp(20px,2.2vw,24px);
  --fs-h3:clamp(26px,3.2vw,36px);
  --fs-h2:clamp(30px,4vw,46px);
  --fs-h1:clamp(3rem,7.4vw,7.5rem);

  --lh-tight:.95;--lh-snug:1.2;--lh-normal:1.5;--lh-relaxed:1.7;
  --ls-tightest:-.04em;--ls-tight:-.03em;--ls-snug:-.015em;
  --ls-wide:.05em;--ls-wider:.08em;

  --measure:65ch;

  /* Archivo at its normal width. The expanded cut read as stretched. */
  --display:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --sans:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* ── Motion ──────────────────────────────────────────────── */
  /* the one easing curve: sharp start, settled end. Never bouncy. */
  --ease:cubic-bezier(0.22,1,0.36,1);
  --dur-1:140ms;   /* state change  */
  --dur-2:240ms;   /* reveal        */
  --dur-3:420ms;   /* entrance      */
  --stagger:55ms;  /* per list item */
}

/* Numbers in a column must not shuffle width as they change. Applied to
   every figure the eye is meant to compare down a column. */
.num{ font-family:var(--mono); font-variant-numeric:tabular-nums; }

/* Motion is opt-in per surface via .motion-ready, so a slow first paint
   never leaves content stuck invisible. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}
