/* Strata Match design tokens: the one source of truth for colour, type,
   space, radius, shadow and motion (design system packet 02, Mike,
   2026-11-01; _ops/design/foundations-2026-11-01/). Loaded once, before
   /v3/v3.css, on every page. Raw values live here and nowhere else.
   Old token names stay as aliases until each section moves off them. */
:root {
  /* color-system:start (generated by scripts/color-system-v3.py, do not edit by hand) */
  --ink: #1B2325;
  --muted: #4F5B5E;
  --faint: #616464;
  --teal-900: #17343A;
  --teal-700: #213E45;
  --teal-600: #1B6670;
  --teal-100: #DDEBEA;
  --mint: #8FE0DA;
  --on-teal-muted: #B4CCD2;
  --good: #45676E;
  --good-bg: #EAF2F3;
  --white: #FFFFFF;
  --paper: #FBFAF7;
  --pale: #EAF2F3;
  --wash: #F6F9FA;
  --gray: #EEF1F1;
  --rule: #E1E3E4;
  --border: #CCCECF;
  --field: #818484;
  --border-strong: #616464;
  --map-land: #F6F9FA;
  --map-cover: #EAF2F3;
  --map-water: #D4E3E6;
  --sponsor: #BEF4F0;
  --sponsor-bg: #F1FDFB;
  --sponsor-line: #B6E6E2;
  --link: var(--teal-600);
  --mint-100: var(--pale);
  --sage: var(--pale);
  --sand: var(--pale);
  --sand-rule: var(--rule);
  --mist: var(--pale);
  --stage: var(--gray);
  /* color-system:end */
  /* Flow header discs and the match ring track (Top 5 flow design, 2026-11-01). */
  --disc-a: #E2EEEE;
  --disc-b: #DAE9E8;
  --ring-track: var(--teal-100);
  /* Compare reference (packet 03, Compare and RFP C:85, C:183). */
  --compare-add-border: #A5B3B5;
  --surface-compare-difference: #FBFDFD;
  /* Top 5 questions reference (T:32, T:177). */
  --lead-ink: #3B4648;
  --progress-track: #E4ECEC;
  /* Text */

  /* Brand: deep teal and mint. Used sparingly: primary action, selected state, logo. */

  /* Status (always paired with words, never colour alone) */
  --wait: #B7791F;
  --wait-ink: #8A5A12;
  --wait-bg: #FBF1DF;
  /* Remove, destructive, one offer (packet 02). */
  --clay: #B4532A;
  --clay-ink: #8F3F1D;
  --clay-bg: #F8EBE3;
  /* Roles: use these in new components (packet 02). */
  --text-body: var(--ink);
  --text-muted: var(--muted);
  --text-link: var(--teal-600);
  --surface-page: var(--white);
  --surface-card: var(--white);
  --surface-desk: var(--pale);
  --surface-inset: var(--wash);
  --action-primary: var(--teal-900);
  --action-primary-hover: var(--teal-700);
  --on-action-primary: var(--white);
  --action-secondary-ring: var(--teal-900);
  --action-hover-bg: var(--pale);

  /* Surfaces and lines */
  --scrim: linear-gradient(0deg, rgba(23, 52, 58, 0.9) 0%, rgba(23, 52, 58, 0) 65%);
  --scrim-full: linear-gradient(0deg, rgba(23, 52, 58, 0.92) 0%, rgba(23, 52, 58, 0.62) 100%);

  /* Radius (packet 02): no angled corners on buttons and chips. */
  --r-xs: 3px;
  --r-sm: 6px;
  --r-control: 10px;
  --r-field: 14px;
  --r-card: 16px;
  --r-panel-lg: 20px;
  --r-frame: 28px;
  --r-pill: 9999px;
  /* Directory results and SM Location Field (R:93-112, F:22,53); same values as the Top 5 questions tokens. */
  --r-compact: 8px;
  /* Tick box in option chips (SM Input I:63). */
  --r-check: 5px;
  --r-circle: 50%;
  /* Company profile reference (C:76-81,99,170): fact tiles, the active section tab, record segments. */
  --r-tile: 12px;
  --r-tab-active: 9px;
  --r-seg: 2px;
  /* One dark panel per page only. */
  --r-angled: 40px 4px 40px 4px;
  /* Additions the packet lacks (Mike, 2026-11-01): the page header's bottom
     corner and the Sponsored edge tab, rounded on top and flush with its card. */
  --r-hero: 0 0 40px 4px;
  --r-tab: 6px 6px 0 0;
  /* Main menu panel: square top under the header, rounded bottom. */
  --r-menu: 0 0 var(--r-tile) var(--r-tile);
  /* Old names, kept until each section moves to the new ones. */
  --r-md: var(--r-control);
  --r-lg: var(--r-card);
  --r-panel: var(--r-panel-lg);
  --r-action: var(--r-control);
  --r-chip: var(--r-sm);

  /* Elevation */
  --shadow-lift: 0 1px 2px #17343A14, 0 12px 28px #17343A24;
  /* Main menu panel (nav-menus-2026-11-04 mockup). */
  --shadow-menu: 0 18px 40px -18px #17343A40;
  /* Top 5 pinned bar (handoff_01_top5_v2 Top 5 Results.dc.html:193). */
  --shadow-bar-top: 0 -1px 0 var(--rule), 0 -12px 28px #17343A14;
  /* Top 5 card rules (Top 5 Results.dc.html:68,71,84, cardSt :238). */
  --shadow-rule-top-teal: inset 0 2px 0 var(--teal-900);
  --shadow-rule-top-wait: inset 0 2px 0 var(--wait);
  --shadow-rule-top-gray: inset 0 1px 0 var(--gray);
  --shadow-card-selected: var(--shadow-option-on), var(--shadow-card);
  /* Top 5 compare (handoff_01_top5_v2 Top 5 Results.dc.html:113-118, :244). */
  --wait-soft: #FFF6E0;
  --wait-line: #E8C67A;
  --on-dark-muted: #C9DADC;
  --on-dark-rule: #FFFFFF24;
  --r-panel-angled: 28px 4px 28px 4px;
  /* Top 5 RFP step document preview (handoff_01_top5_v2 Top 5 Results.dc.html:147-156). */
  --r-doc-mark: 4px;
  --r-mono-sm: 8px;
  --shadow-wait-ring: inset 0 0 0 2px var(--wait-line);
  --shadow-cell-left: inset 1px 0 0 var(--rule);
  --shadow-row-on-dark: inset 0 -1px 0 var(--on-dark-rule);
  --shadow-rule-top-strong: inset 0 1px 0 var(--rule);
  /* Phone compare, two at a time (Claude Design "Strata Match directory refinements" 1A/1B). */
  --shadow-pair-head: 0 1px 0 var(--rule), 0 6px 12px #17343A0F;
  --shadow-cell-right-soft: inset -1px 0 0 var(--gray);
  --shadow-rule-bottom-soft: inset 0 -1px 0 var(--gray);
  --shadow-card: 0 1px 2px #17343A0A, 0 10px 30px -14px #17343A26;
  --shadow-card-hover: 0 1px 2px #17343A0A, 0 16px 36px -14px #17343A38;
  /* Hairlines and option states (Top 5.dc.html T:38,76,118; SM Input I:61-62). */
  --shadow-rule-bottom: inset 0 -1px 0 var(--rule);
  --shadow-rule-top: inset 0 1px 0 var(--rule);
  --shadow-rule-top-soft: inset 0 1px 0 var(--map-water);
  --shadow-option: inset 0 0 0 1px var(--border);
  --shadow-field: inset 0 0 0 1px var(--field);
  --shadow-field-focus: inset 0 0 0 2px var(--teal-600);
  --shadow-field-error: inset 0 0 0 2px var(--wait);
  --shadow-photo-inset: 0 0 0 11px var(--pale);
  /* SM Swirl ring at size 560: Math.round(560 * 0.018) = 10px (handoff_01_top5_v2 Top 5 Results). */
  --shadow-photo-corner: 0 0 0 10px var(--pale);
  --chevron-input: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231B2325' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E");
  --shadow-option-on: inset 0 0 0 2px var(--teal-900);
  /* Phone bottom bar on the company profile (C:180). */
  /* Exact profile rings and inset rules, packet 03 C:48,68,101,156; A:39. */
  --shadow-profile-photo: 0 0 0 14px var(--pale);
  --shadow-profile-photo-phone: 0 0 0 8px var(--pale);
  --shadow-inset-rule-left: inset 1px 0 0 var(--rule);
  --shadow-inset-border: inset 0 0 0 1px var(--border);
  --shadow-inset-rule: inset 0 0 0 1px var(--rule);
  --shadow-inset-teal: inset 0 0 0 1px var(--teal-900);
  --shadow-bar: 0 -1px 0 #E1E3E4, 0 -12px 28px #17343A1F;
  /* Compare table rules (C:75, 78-107, 183). */
  --shadow-compare-header-rule: 0 1px 0 var(--rule);
  --shadow-inset-gray-left: inset 1px 0 0 var(--gray);
  --shadow-inset-gray-top: inset 0 1px 0 var(--gray);
  --shadow-inset-rule-top: inset 0 1px 0 var(--rule);
  /* SM Listing Card selected (L:102) and SM Location Field states (F:52). */
  --shadow-listing-selected: 0 0 0 2px var(--teal-900), var(--shadow-card);
  --shadow-field-idle: inset 0 0 0 1px var(--field);
  --focus-ring: 0 0 0 2px #FFFFFF, 0 0 0 5px var(--teal-600);
  --shadow-soft: var(--shadow-card);
  /* Stronger hairline (desk and paper, Mike 2026-10-22): a white card on the pale desk reads as an object. */
  --shadow-hair: 0 0 0 1px #17343A0F, 0 1px 3px #17343A1A;

  /* Type */
  --font-ui: "Nunito Sans Variable", "Nunito Sans", "Nunito Sans Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Display: page and section titles, big numbers (packet 02). */
  --font-display: "Source Serif 4 Variable", "Source Serif 4", Georgia, serif;
  --font-doc: var(--font-display);
  --fs-display: clamp(40px, 5.2vw, 60px);
  --fs-h1: clamp(32px, 3.6vw, 44px);
  --fs-h2: clamp(26px, 2.6vw, 32px);
  --fs-h3: 24px;
  --fs-title: 20px;
  --fs-lead: 18px;
  --fs-body: 16px;
  --fs-ui: 15px;
  --fs-small: 14px;
  --fs-meta: 13px;
  --fs-micro: 12px;
  /* Menu photo card title (nav-menus-2026-11-04 mockup), public navigation only. */
  --fs-nav-card: 19px;
  /* Top 5 questions reference (packet 01 v2, Top 5.dc.html T:31,32,50). */
  --fs-hero-lg: 56px;
  /* Top 5 results title and the rank and match figures (handoff_01_top5_v2 Top 5 Results.dc.html:35,55,77). */
  --fs-hero-md: 54px;
  --fs-figure-lg: 34px;
  /* RFP preview title (Top 5 Results.dc.html:147). */
  --fs-doc-title: 21px;
  --fs-question: 36px;
  /* Sizes the Claude Design references use that packet 02's token list lacks
     (Mike, 2026-11-01: match the references exactly). Phones keep smaller sizes. */
  --fs-hero: clamp(34px, 4.4vw, 52px);
  --fs-section: clamp(26px, 3vw, 36px);
  --fs-panel: 22px;
  --fs-lead-sm: 17px;
  /* Company profile reference (packet 03, Company Profile C:58,67,122,159). */
  --fs-mark: 30px;
  --fs-figure: 26px;
  --fs-hero-phone: 34px;
  /* Directory results reference (packet 03, R:160): the phone page title. */
  --fs-directory-phone: 32px;
  /* R:69 is fixed at 52px, including the 1000px review width. */
  --fs-directory-title: 52px;

  /* Layout */
  --wrap: 1184px;
  --wrap-read: 680px;
  --wrap-wide: 1280px;
  --page-pad: 48px;
  --page-pad-phone: 16px;
  --gutter: var(--page-pad-phone);
  --nav-h: 84px;
  --shadow-focus: var(--focus-ring);
  /* Space, 4px base (packet 02). */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-14: 56px;
  --s-18: 72px;
  /* Controls (packet 02). */
  --control-h: 48px;
  --control-h-sm: 40px;
  --hit-min: 44px;
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%2317343A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* Shared interaction contract; brand colour and shape remain V3 aliases. */
  --ui-space-1: var(--s-1);
  --ui-space-2: var(--s-2);
  --ui-space-3: var(--s-3);
  --ui-space-4: var(--s-4);
  --ui-space-5: var(--s-5);
  --ui-space-6: var(--s-6);
  --ui-space-8: var(--s-8);
  --ui-control-height: var(--control-h);
  --ui-control-height-sm: var(--control-h-sm);
  --ui-control-height-lg: var(--control-h);
  --ui-control-height-hero: 52px;
  --ui-control-font-size: 16px;
  --ui-control-border-width: 1px;
  --ui-control-padding: 14px;
  --ui-control-gap: 10px;
  --ui-button-border-width: 1.5px;
  --ui-button-font-size: var(--fs-ui);
  --ui-card-padding-compact: 18px;
  --ui-card-padding-mobile: 14px;
  --ui-control-radius: var(--r-md);
  --ui-card-radius: var(--r-lg);
  --ui-card-padding: var(--ui-space-6);
  --ui-card-border: var(--border);
  --ui-control-border: var(--field);
  --ui-focus-color: var(--teal-900);
  --ui-surface: var(--white);
  --ui-surface-hover: var(--pale);
  --ui-text: var(--ink);
  --ui-text-muted: var(--muted);
  --ui-menu-layer: 150;

  /* Buttons, packet 02 section 2.3 (SM Action.dc.html A:38-51). Rings are
     inset so the box stays 48px; focus adds the 2px white gap and 3px ring. */
  --shadow-inset-clay: inset 0 0 0 1px var(--clay);
  --shadow-inset-mint: inset 0 0 0 1px var(--mint);
  --shadow-inset-teal-focus: var(--shadow-inset-teal), var(--focus-ring);
  --shadow-inset-clay-focus: var(--shadow-inset-clay), var(--focus-ring);
  --shadow-inset-border-focus: var(--shadow-inset-border), var(--focus-ring);
  --shadow-inset-mint-focus: var(--shadow-inset-mint), var(--focus-ring);
  --dur-spin: 800ms;
  /* Inputs, packet 02 section 2.6 (SM Input.dc.html I:28-29): the white tick on
     a chosen option's 20px indicator (12px, stroke 3.5). */
  --tick-on: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l10 -10'/%3E%3C/svg%3E");
  --shadow-indicator: inset 0 0 0 2px var(--field);

  /* Motion */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 160ms;
  --dur-base: 260ms;
  --dur-slow: 400ms;
  --stagger: 80ms;
  /* The home hero's slow photo rotation: four photos, 7 s each. */
  --dur-rotate: 28s;
}
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; }
}