/* ============================================================
   WYVERN FREIGHT — DESIGN TOKENS
   Single source of truth. Every section pulls from these.
   ============================================================ */
:root{
  /* Colour */
  --ink:#0F1318;
  --ink-2:#262C35;
  --muted:#5B6470;
  --subtle:#6B7380;   /* was #8A929D (3.14:1); now ~4.8:1 on white, WCAG AA */
  --line:#E4E7EB;          /* dividers, table and section rules */
  --line-strong:#D3D8DE;   /* card and container borders */
  --line-field:#7C8592;    /* form field edges: 3.7:1 on white (WCAG 1.4.11). Owner decision 2, 2026-10-26 */

  /* Surfaces (shapes audit 2026-10-26, owner decision 3): ONE grey for bands, tiles, notices and form pages.
     --tint (was #FAFAFB, 1.04:1 on white, invisible) and --dc-grey (was #E9EAED) now alias --surface-2. */
  --surface-2:#F4F5F7;
  --surface-3:#E6E8EC;     /* tags/pills and stripes on --surface-2 only */
  --hover:#F4F5F7;
  --tint:var(--surface-2);
  --canvas:#FFFFFF;
  --red:#D9140E;          /* refined from the logo's #FF0000 for UI use */
  --red-press:#B60F0A;
  --red-active:#9C0C08;
  --red-soft:#FDECEB;
  --ok:#1E7F4B;
  --focus:#1D4ED8;

  /* Dark surfaces (pre-footer, footer) */
  --night:#0B0E12;
  --night-2:#11151B;
  --on-night:#FFFFFF;
  --on-night-2:rgba(255,255,255,.74);
  --on-night-3:rgba(255,255,255,.46);
  --line-night:rgba(255,255,255,.10);
  --focus-night:#8AB4FF;

  /* Type families
     Target: GT America Standard (primary) + GT America Mono (operational accent).
     GT America is NOT licensed/installed yet, so the current faces stay live.
     When licensed web files arrive: add @font-face rules in assets/css/fonts.css,
     then put 'GT America Standard' / 'GT America Mono' first in these two stacks. */
  --sans:'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Type scale (desktop targets in comments; clamps scale down responsively) */
  --fs-hero:clamp(48px, 5.6vw, 88px);     /* 80-96 */
  --fs-banner:clamp(42px, 5vw, 72px);     /* 64-76 */
  --fs-h2:clamp(34px, 3.6vw, 56px);       /* 48-60 */
  --fs-h3:clamp(26px, 2.3vw, 34px);       /* 30-36 */
  --fs-lead:clamp(18px, 1.5vw, 22px);     /* 21-24 */
  --fs-body:17px;                          /* 17-18 */
  --fs-nav:14.5px;                         /* 14-15 */
  --fs-btn:14px;                           /* 14 */
  --fs-label:12px;                         /* 11-12 mono */
  --fs-label-lg:12px;
  --fs-footer:14px;                        /* 13-14 */
  --fs-legal:12px;                         /* 11-12 */
  --lh-display:.95;
  --lh-body:1.6;
  --track-display:-.035em;
  --track-label:.08em;
  --serif:'Spectral', Georgia, serif;

  /* Eyebrow (audit 2026-10-25): one style (base.css .eyebrow), one colour on dark/photo surfaces,
     and two gaps: eyebrow to H1 on banners, eyebrow to H2 in body sections where the eyebrow carries its own margin.
     Component grids that space eyebrow, heading and lead together (.dc-head 14, .dc-copy 18, hero 22, About purpose 12)
     keep their approved values. */
  --eb-on-dark:#FF6A64;
  --eb-gap-banner:20px;
  --eb-gap:16px;

  /* Spacing scale (4-based) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;

  /* Space rhythm (v2): ~1.6 ratio, three tiers.
     tight  = label/heading to its own text
     block  = between blocks inside a section
     break  = between sections (asymmetric: more above the route-stop line than below).
     Document rhythm: 80px per break. The 150px+ breaks measured on Maersk/DSV/DP World
     suit 4-6 section marketing pages; on a 17-section policy they read as dead space. */
  --sp-tight:16px;
  --sp-block:32px;
  --sp-break-above:48px;
  --sp-break-below:32px;

  /* Grid: 12 columns on the site container, shared with the header.
     Measured refs (1440px): Maersk logo 73 = H1 75; DSV 52 = 52; DP World 128 = 128.
     Section breaks 160-228 (DSV), ~160 (DP World); heading-to-text 16-24. */
  --cols:12;
  --col-gap:40px;

  /* Layout */
  --container:1440px;
  --gutter:40px;

  /* Shape (shapes audit 2026-10-26, AUDIT-SHAPES-SECTIONS-2026-10-26.md). Square everywhere: buttons, fields, cards,
     panels, menus, images. Two declared exceptions: --r-tile for reference tiles and their dialog (Glossary), --r-pill
     for filter chips and tags (never a button). 50% stays for dots and round controls. The cut corner is retired
     (owner decision 1). tools/check-requirements.mjs fails any other radius. */
  --r-0:0;
  --r-tile:12px;
  --r-pill:999px;

  /* Elevation: three shadows, tinted to ink. A box gets one edge: border OR fill OR shadow, never two. */
  --shadow-card:0 5px 10px rgba(15,19,24,.14);                                   /* photo link card (.dc-svc), map controls */
  --shadow-overlay:0 24px 48px rgba(11,14,18,.24),0 2px 4px rgba(11,14,18,.08);   /* dialogs, floating form card, suggestion lists */
  --shadow-drop:0 26px 40px -28px rgba(15,19,24,.4);                             /* header menus and the compact header */

  /* Motion */
  --ease:cubic-bezier(.2,.7,.2,1);
  --t-fast:150ms;
  --t-base:220ms;

  /* Header */
  --bar:90px;
  --bar-compact:68px;
}
@media (max-width:1139px){
  :root{ --gutter:16px; --bar:64px; --bar-compact:64px; --sp-block:24px; --sp-break-above:36px; --sp-break-below:24px; --sp-tight:14px; --col-gap:24px; }
}