/* web-studio design system: TOKENS. The one file where every number that shapes a page lives.

   Extracted 2026-09-30 from the AirwayControl site (sites/airwaycontrol/drafts/2026-09-26/base.css
   and chrome.css, flightcontrol origin/main 43ccd752). The motion tokens are the web motion law's
   (docs/rules/01-motion.md) and carry their measured values unchanged; the palette is
   AirwayControl's "Draft G" (blush paper, plum ink, dusty rose) and is the part a new site replaces.

   RULES (enforced by .claude/hooks/web-guard.py):
   - A call site names a token. It never writes a number of seconds, a cubic-bezier or an easing
     keyword of its own. New timing goes HERE, with a name and a comment saying what it is for.
   - Tokenise with the values that stand, not with the nearest token that exists (2026-09-29: three
     transitions were "rounded" to the nearest token and got faster; Christopher noticed).
   - Reduce Motion redefines the tokens below, in this file, so no call site needs its own query. */

:root {
  /* ---------- palette: AirwayControl Aircraft Library (2026-10-10) ----------
     apple.com's register, like airwaycontrol.intelsystems.ai: white page, near-black ink, Apple's greys.
     The drawings are white aircraft with alpha, so they sit on a PLATE a step darker than the page;
     the plate is the one surface that is not page colour. Contrast measured with scripts/contrast.py. */
  --bg: #ffffff;
  --bg-2: #f5f5f7;      /* bands, footer */
  --ink: #1d1d1f;       /* 16.83:1 on --bg */
  --soft: #6e6e73;      /* secondary text. 5.07:1 on --bg, 4.66:1 on --bg-2 */
  --dim: #d2d2d7;
  --accent: #6e6e73;    /* eyebrows: quiet, the drawings carry the colour of the page */
  --link: #0066cc;      /* Apple's text link. 5.57:1 on --bg */
  --cta: #0071e3;       /* the one blue pill, as on airwaycontrol.intelsystems.ai */
  --line: rgba(0,0,0,.1);
  --tile: #f5f5f7; --tile-2: #e8e8ed;
  --plate: #dfe0e5;     /* behind a drawing: white aircraft read against it in both views */
  --plate-hover: #d6d7dd;
  --plate-ink: #4d4d52; /* captions and dimension lines on the plate. 6.38:1 on --plate */
  --nav-bg: rgba(255,255,255,.8);
  --bar-bg: rgba(255,255,255,.86); /* the sticky filter bar on the index */
  --foot-bg: #f5f5f7;
  --on-ink: #ffffff;
  --code-bg: #f5f5f7;
  --press-scale: 0.98;  /* a card under the finger */
  --pager-ink: #4d4d52; /* the arrows in the previous/next circles: the plate caption's grey. 6.38:1 on --plate */
  /* ---------- layout ---------- */
  --gutter: 22px;        /* 40px from 734px, below */
  --wrap: 1260px;        /* the page column */
  --narrow: 980px;       /* a reading-width column inside a section */
  --read: 68ch;          /* a text page's column (About, Privacy) */
  --nav-h: 52px;         /* the sticky top bar; anchors land under it */
  --radius-card: 28px; --radius-media: 32px; --radius-pill: 980px;
  --section-pad: clamp(88px, 11vw, 152px);

  /* ---------- type (Apple product-page scale 80/56/40/28/21/17/14/12, measured) ---------- */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; /* the web exception to the font law: the system stack, never a webfont */
  --fs-hero: clamp(44px, 7.4vw, 96px);
  --fs-h1: clamp(36px, 5.2vw, 64px);
  --fs-h2: clamp(30px, 3.9vw, 48px);
  --fs-h3: clamp(22px, 2vw, 28px);
  --fs-lead: clamp(19px, 1.7vw, 24px);
  --fs-body: 17px;
  --fs-small: 12px;

  /* ---------- motion (the web motion law; values measured and approved 2026-09-29) ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);     /* entrances: cascade steps, page-in, notification */
  --ease-in-out: cubic-bezier(0.45, 0, 0.25, 1);  /* state changes and exits: hover, press, focus, bold, page-out */
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);       /* Apple's staggered curve: scroll reveals, carousels, the calm hero */
  --dur-fast: 180ms;      /* hover, press, focus ring, underline */
  --dur-base: 320ms;      /* the bold that marks the page you are on, small toggles, the top bar's cross-fade */
  --dur-slow: 500ms;      /* labels and names that swap in a carousel */
  --dur-enter: 520ms;     /* one step of an entrance cascade */
  --dur-page-out: 240ms;  /* the page you leave fades out */
  --dur-reveal: 1s;       /* a block that fades up once as it scrolls into view */
  --dur-word: 350ms;      /* one word of a write-on paragraph */
  --stagger: 70ms;        /* between two steps of a cascade */
  --reveal-step: 120ms;   /* between two scroll reveals in the same row */
  --page-in-start: 80ms;  /* a sub-page's cascade starts as the old page is half gone */
  --glide-after: 280ms;   /* /#section from another page: land, then glide once the old page is gone */
  --rise: 12px;           /* how far an entering block travels up */
  --reveal-rise: 24px;    /* how far a scroll reveal travels up */
  --settle-scale: 0.98;   /* cards that settle from just under full size */
  --dur-hero: 700ms;      /* a calm hero element (AirwayControl: glass card and notification 700, Live Activity 900) */
  --hero-drop: 14px;      /* how far a hero card comes down from */
}
@media (min-width: 734px) { :root { --gutter: 40px; } }

/* dark: black page and Apple's dark greys; the plate stays a raised grey so the white aircraft still read */
@media (prefers-color-scheme: dark) {
  :root {
    /* Christopher 2026-10-11: the dark grey is #121212, the top bar's colour, on plates, buttons, cards, fields and chips.
       Measured on #121212: --soft and --plate-ink 7.28:1, --pager-ink 18.73:1, --link 6.21:1, --ink 17.21:1. The plate
       against the black page is 1.12:1 (a surface, not text; the drawings and captions carry it). */
    --surface-dark: #121212;
    --bg: #000000; --bg-2: var(--surface-dark); --ink: #f5f5f7; --soft: #a1a1a6; --dim: #424245; --accent: #a1a1a6;
    --link: #2997ff; --cta: #0071e3; --line: rgba(255,255,255,.14); --tile: var(--surface-dark); --tile-2: #1c1c1e;
    --plate: var(--surface-dark); --plate-hover: #1c1c1e; --plate-ink: #a1a1a6; --pager-ink: #ffffff;
    --nav-bg: rgba(18,18,18,.8); --bar-bg: rgba(0,0,0,.82); --foot-bg: var(--surface-dark); --on-ink: #ffffff; --code-bg: var(--surface-dark);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* opacity only, no movement, shorter; anchors jump (smooth scroll is only set under no-preference) */
  :root {
    --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 240ms; --dur-enter: 260ms; --dur-page-out: 160ms;
    --dur-reveal: 0ms; --dur-word: 0ms; --stagger: 30ms; --reveal-step: 0ms; --page-in-start: 0ms;
    --rise: 0px; --reveal-rise: 0px; --settle-scale: 1; --hero-drop: 0px; --dur-hero: 300ms; --press-scale: 1;
  }
}