/*
 * Design tokens. Every size, color, and timing in the app comes from here.
 * Change the look by editing a token, never by setting a value on an element.
 *
 * Type and space are fluid: each token grows smoothly from a 360px phone to a
 * 1280px desktop, then stops. The rem + vw form keeps browser zoom working.
 *   Phone:   16px body, ratio 1.2  (a gentle scale for a small screen)
 *   Desktop: 18px body, ratio 1.25 (more contrast between levels)
 * That fluid body size is for reading text. App chrome (buttons, table cells,
 * panels, form fields) uses --fs-ui, a fixed UI size that does not grow on desktop.
 */
:root {
  /* ---- Type scale (px at 360 -> 1280) ---- */
  --step-m2: clamp(0.6944rem, 0.6844rem + 0.0444vw, 0.72rem);   /* 11.1 -> 11.5  badges only */
  --step-m1: clamp(0.8333rem, 0.8072rem + 0.1159vw, 0.9rem);    /* 13.3 -> 14.4 */
  --step-0:  clamp(1rem, 0.9511rem + 0.2174vw, 1.125rem);       /* 16.0 -> 18.0 */
  --step-1:  clamp(1.2rem, 1.1193rem + 0.3587vw, 1.4063rem);    /* 19.2 -> 22.5 */
  --step-2:  clamp(1.44rem, 1.3156rem + 0.5527vw, 1.7578rem);   /* 23.0 -> 28.1 */
  --step-3:  clamp(1.728rem, 1.5444rem + 0.8161vw, 2.1973rem);  /* 27.6 -> 35.2 */
  --step-4:  clamp(2.0736rem, 1.8103rem + 1.1704vw, 2.7466rem); /* 33.2 -> 43.9 */
  --step-5:  clamp(2.4883rem, 2.1186rem + 1.6433vw, 3.4332rem); /* 39.8 -> 54.9 */

  /* Roles. Elements use these names, so re-pointing one retunes every use. */
  --fs-badge:   var(--step-m2);
  --fs-small:   var(--step-m1);
  --fs-body:    var(--step-0);
  --fs-lead:    var(--step-1);
  --fs-h3:      var(--step-1);
  --fs-h2:      var(--step-2);
  --fs-h1:      var(--step-3);
  --fs-display: var(--step-5);  /* wordmark, hero headline */
  --fs-ui:      0.875rem;       /* 14px at every width: buttons, chips, tables, panels, form fields */

  /* ---- Fonts ---- */
  /* System fonts by default: nothing to download, nothing to allow in the CSP.
     To use Google Fonts, see the note in _headers. */
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;  /* bundled in /fonts */
  --font-display: var(--font-body);
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;

  --w-body: 400;
  --w-strong: 600;
  --w-display: 700;

  --lh-tight: 1.15;  /* headings */
  --lh-snug: 1.35;   /* labels, table cells */
  --lh-body: 1.55;   /* paragraphs */

  --measure: 65ch;   /* longest comfortable line of body text */

  /* ---- Casing (a per-app choice) ----
     Chrome copy (headings, nav, buttons, tabs, badges) is written in Title Case
     in the markup. Whether eyebrows, labels, and badges also render in ALL CAPS
     is decided per app: set --label-case to uppercase and give it tracking. */
  --label-case: uppercase; /* Org Chart: panel section labels and menu headers in caps */
  --label-track: 0.08em;

  /* ---- Space scale (px at 360 -> 1280) ---- */
  --space-3xs: clamp(0.25rem, 0.2378rem + 0.0543vw, 0.2813rem); /*  4 ->  4.5 */
  --space-2xs: clamp(0.5rem, 0.4755rem + 0.1087vw, 0.5625rem);  /*  8 ->  9 */
  --space-xs:  clamp(0.75rem, 0.7133rem + 0.163vw, 0.8438rem);  /* 12 -> 13.5 */
  --space-s:   clamp(1rem, 0.9511rem + 0.2174vw, 1.125rem);     /* 16 -> 18 */
  --space-m:   clamp(1.5rem, 1.4266rem + 0.3261vw, 1.6875rem);  /* 24 -> 27 */
  --space-l:   clamp(2rem, 1.9022rem + 0.4348vw, 2.25rem);      /* 32 -> 36 */
  --space-xl:  clamp(3rem, 2.8533rem + 0.6522vw, 3.375rem);     /* 48 -> 54 */
  --space-2xl: clamp(4rem, 3.8043rem + 0.8696vw, 4.5rem);       /* 64 -> 72 */
  --space-3xl: clamp(6rem, 5.7065rem + 1.3043vw, 6.75rem);      /* 96 -> 108 */

  /* ---- Layout ---- */
  --gutter: 16px;                 /* side margin on a phone; never less (24px from 40rem) */
  --wrap: 72rem;                  /* reading pages only (.wrap); workspaces run full width */
  --tap: 44px;                    /* control height on touch: smallest thing a finger should hit */
  /* Breakpoint: one, at 40rem (640px). The design starts at desktop; the phone
     layout is its own optimization pass. CSS can't read a token in a media
     query, so base.css writes 40rem directly. */

  /* ---- Shape ---- */
  /* One radius for every box (BUILD_GUIDANCE style references, 2026-10-18); pills only for status. */
  --r-s: 4px;
  --r-m: 4px;
  --r-l: 4px;
  --r-pill: 999px;
  --border: 1px;

  /* ---- Motion ---- */
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 320ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* ---- Layers ---- */
  --z-bar: 10;
  --z-overlay: 100;
}

/* With a mouse, controls drop to desktop size; a 44px toolbar button looks
   oversized on a monitor. Touch keeps 44px. */
@media (pointer: fine) {
  :root { --tap: 36px; }
}

/*
 * Color. Three roles, each with its own tokens. A token never serves two roles.
 *   Brand:       identity (wordmark, logo). Never used to mean something.
 *   Interactive: things you can tap (links, buttons, focus ring, active sort).
 *   Semantic:    meaning (ok / warn / bad). Only where the color carries a fact.
 * Neutrals carry everything else. Every text color is checked at 4.5:1 or
 * better against --bg and --surface in both themes.
 *
 * Dark is the default. Light applies when the viewer picks it (theme toggle).
 */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121316;
  --surface: #1b1d21;
  --surface-2: #24272c;
  --line: rgb(255 255 255 / 0.09);  /* Linear-style hairline: 9% white over any dark surface */
  --selected: rgb(255 255 255 / 0.10);
  --ink: #efebe3;
  --ink-2: #bdb8ae;
  --ink-3: #8f8a81;

  --brand: #8aa4ff;               /* Wayfinder blue, lifted for a dark ground */
  --brand-ink: #0d1630;           /* text on a --brand fill */

  --accent: #7fb2ff;
  --accent-ink: #0d1a2e;          /* text on an --accent fill */
  --focus: #7fb2ff;

  --ok: #5fcf8f;
  --warn: #f2c14e;
  --bad: #ff7a70;

  --shadow-1: none;               /* shadows barely read on dark; use --line */
  --glow: 0 0 0 1px var(--line);
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f2eb;
  --surface: #fffdf8;
  --surface-2: #ebe7de;
  --line: #d6d0c4;
  --selected: rgb(0 0 0 / 0.07);
  --ink: #1c1b18;
  --ink-2: #4b4841;
  --ink-3: #6a665e;

  --brand: #3b5bdb;               /* Wayfinder blue, shared with All-Onboard */
  --brand-ink: #ffffff;

  --accent: #1d5fc4;
  --accent-ink: #ffffff;
  --focus: #1d5fc4;

  --ok: #1f7a45;
  --warn: #8a6100;
  --bad: #b3261e;

  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.06), 0 4px 12px rgb(0 0 0 / 0.06);
  --glow: none;
}