/* GTDI Supply — design tokens. GENERATED by theme/tools/build_tokens.py from tools/tokens.src.json.
 * Do not edit by hand. This is the ONLY stylesheet allowed to contain color literals;
 * base.css and components.css use var(--…) exclusively (checked by tools/check_css.py).
 * v2 "Institutional blue" (A27): navy family on white, warm paper, one brass accent, Lora + Inter.
 * Base: Direction A "Institutional clarity" + A21 merges (B, C) + P0 fixes. */
:root {
  /* Color — text, lines, surfaces, navy (interaction + structure only), states, placeholders */
  --ink-900: #111B2C; /* Primary text and headings (navy-tinted near-black) */
  --ink-800: #233042; /* Strong secondary text (values, list items) */
  --ink-700: #384456; /* Secondary text (lead paragraphs, descriptions) */
  --ink-600: #4A5567; /* Meta text, hints, table headers, muted overlines */
  --ink-500: #5B6676; /* Lowest-emphasis text: input placeholders, 'not stated' marks */
  --line-strong: #7A8494; /* Form-control and quiet-button borders (UI, needs 3:1) */
  --line: #D9D1C2; /* Card and component outlines (decorative, warm) */
  --line-soft: #E8E2D6; /* Row hairlines (decorative, warm) */
  --line-cool: #D5DCE5; /* Hairlines inside white data surfaces (tables, records) */
  --rule: #0B2545; /* Booktabs table rules and section rules (navy-900) */
  --surface: #FFFFFF; /* Page and card background */
  --paper-50: #FBF9F5; /* Hover rows, the faintest warm tint */
  --paper-100: #F6F2EA; /* Alternate bands (warm paper) */
  --paper-200: #EDE7DB; /* Deeper paper: card heads, recessed panels, illustration stages */
  --paper-300: #E2DACB; /* Paper edges and stage floors (decorative) */
  --surface-alt: #F6F2EA; /* Alias of paper-100 (v1 name kept for components) */
  --surface-sunken: #EDE7DB; /* Alias of paper-200 (recessed areas) */
  --surface-hover: #FBF9F5; /* Table row hover (paper-50) */
  --navy-950: #06172E; /* Utility bar, footer — the deepest shade */
  --navy-900: #0B2545; /* Wordmark tile, dark bands, focus ring */
  --navy-800: #12355F; /* Hover / pressed for primary buttons; band gradients */
  --navy-700: #1D4F8C; /* Links, primary buttons, active navigation, checked controls (action blue) */
  --blue-600: #2A62A8; /* Illustration mid-blue; never text on light */
  --blue-100: #E2EBF6; /* Selected / info tint */
  --blue-50: #F1F5FB; /* Quiet info tint (context strip, info panels) */
  --brass-700: #7A5B26; /* Accent text on light surfaces (eyebrows, numerals) */
  --brass-500: #B38B4D; /* Accent hairlines and marks on light surfaces (decorative only) */
  --brass-300: #D6B878; /* Accent text, numerals and rules on navy */
  --brass-100: #F4EBD8; /* Accent tint (numeral discs, highlights) */
  --on-dark: #FFFFFF; /* Headings and primary text on navy */
  --on-dark-2: #D5E0EF; /* Body text and links on navy */
  --on-dark-3: #A9BCD4; /* Labels and meta on navy */
  --firm-fg: #1D5A34; /* Firm until [date] / confirmed (text + icon) */
  --firm-bg: #E6F2EA; /* Firm chip fill */
  --firm-line: #2F6E46; /* Firm chip border (solid 2px; grayscale-safe coding) */
  --ind-fg: #6B4700; /* Indicative — awaiting supplier confirmation / to confirm */
  --ind-bg: #FCF1D6; /* Indicative chip fill */
  --ind-line: #8F6608; /* Indicative chip border (dashed; grayscale-safe coding) */
  --exp-fg: #475161; /* Expired — request a refresh (slate: routine, not an alarm) */
  --exp-bg: #ECEFF3; /* Expired chip fill (under the hatch) */
  --exp-line: #6E7887; /* Expired chip border (solid 1px + hatched fill) */
  --req-fg: #1D4F8C; /* Request current pricing (a professional action state, not an error) */
  --req-bg: #EAF1FA; /* Request chip fill */
  --req-line: #5A80B5; /* Request chip border (dotted; grayscale-safe coding) */
  --gate-fg: #0B2545; /* Account pricing — available after approval (public pages only) */
  --gate-bg: #F1F5FB; /* Gate chip fill */
  --gate-line: #79859A; /* Gate chip border (double; grayscale-safe coding) */
  --err-fg: #A1251B; /* Form errors only (text + icon) */
  --err-bg: #FDF0EE; /* Error summary fill */
  --err-line: #C2372B; /* Error border on fields (2px) */
  --ok-fg: #1D5A34; /* Valid-field confirmation mark ('Looks good') */
  --ph-bg: #F1ECE2; /* [OWNER-SUPPLIED] text marks and labelled media placeholders */
  --ph-line: #80776A; /* Placeholder dashed outline */
  --proof-bg: #FFF7E0; /* Prototype-only marker behind proof-gated sentences */
  --proof-line: #8F6608; /* Prototype-only dashed underline for proof-gated sentences */
  --proto-bg: #2A2F36; /* Prototype notice bar (development stub, ?devbar=1 only) */
  --proto-fg: #E9ECEF; /* Prototype notice bar text */
  --focus: #0B2545; /* Focus ring on light surfaces (3px) */
  --focus-halo: #FFFFFF; /* 2px halo outside the focus ring */
  --swatch-blue: #3E6FB5; /* Product color swatch: blue (data, not UI) */
  --swatch-black: #1B1F24; /* Product color swatch: black */
  --swatch-white: #FFFFFF; /* Product color swatch: white */
  --swatch-clear: #E9EEF3; /* Product color swatch: clear */
  --swatch-other-a: #9AA5B3; /* Product color swatch: other (split) */
  --swatch-other-b: #D9DEE5; /* Product color swatch: other (split) */
  /* Illustration palette (inline-SVG renders: template-parts/product-art.php, inc/art.php) */
  --art-stage: #EFE9DD; /* Stage disc behind renders (light) */
  --art-stage-2: #E6DECF; /* Stage floor / inner disc */
  --art-floor: #D7CDBB; /* Floor line */
  --art-box: #FFFFFF; /* Dispenser box front face */
  --art-box-top: #F1F4F8; /* Dispenser box top face */
  --art-box-side: #DCE3EC; /* Dispenser box side face */
  --art-box-edge: #B9C4D2; /* Dispenser box edges */
  --art-slot: #2B3443; /* Dispenser opening (shadow inside the box) */
  --art-print: #0B2545; /* Printed text and rules on box labels */
  --art-print-2: #5B6676; /* Secondary printed text on box labels */
  --art-kraft: #CFAE80; /* Shipping case front (corrugated kraft) */
  --art-kraft-top: #DEC49F; /* Shipping case top */
  --art-kraft-side: #B8925F; /* Shipping case side */
  --art-kraft-edge: #9C7A4C; /* Shipping case edges, flap line */
  --art-tape: #E9D8B5; /* Case tape */
  --art-blue: #5B8FD0; /* Blue glove */
  --art-blue-shade: #3A6CAE; /* Blue glove shade */
  --art-blue-deep: #2B568F; /* Blue glove outline */
  --art-blue-light: #A9C6EA; /* Blue glove highlight */
  --art-black: #30353D; /* Black glove */
  --art-black-shade: #1D2127; /* Black glove shade */
  --art-black-deep: #121519; /* Black glove outline */
  --art-black-light: #5D6470; /* Black glove highlight */
  --art-white: #F4F5F2; /* White glove */
  --art-white-shade: #D9DCD6; /* White glove shade */
  --art-white-deep: #A9AEA6; /* White glove outline */
  --art-white-light: #FFFFFF; /* White glove highlight */
  --art-clear: #E4ECF3; /* Clear (vinyl / poly) glove */
  --art-clear-shade: #C7D4E0; /* Clear glove shade */
  --art-clear-deep: #93A6BA; /* Clear glove outline */
  --art-clear-light: #FFFFFF; /* Clear glove highlight */
  --art-purple: #8C7BD1; /* Purple glove */
  --art-purple-shade: #6A58B3; /* Purple glove shade */
  --art-purple-deep: #4F3F96; /* Purple glove outline */
  --art-purple-light: #C3B9EC; /* Purple glove highlight */
  --art-pink: #E59AB6; /* Pink glove */
  --art-pink-shade: #C97497; /* Pink glove shade */
  --art-pink-deep: #A95A7B; /* Pink glove outline */
  --art-pink-light: #F6CBDB; /* Pink glove highlight */
  --art-green: #65B088; /* Green glove */
  --art-green-shade: #468F68; /* Green glove shade */
  --art-green-deep: #327352; /* Green glove outline */
  --art-green-light: #A9D6BD; /* Green glove highlight */
  --art-orange: #EE9648; /* Orange glove */
  --art-orange-shade: #D07729; /* Orange glove shade */
  --art-orange-deep: #A95D1A; /* Orange glove outline */
  --art-orange-light: #F8C79A; /* Orange glove highlight */
  --art-latex: #EFE1BF; /* Natural latex glove */
  --art-latex-shade: #D8C597; /* Latex glove shade */
  --art-latex-deep: #B49F6E; /* Latex glove outline */
  --art-latex-light: #FAF3E0; /* Latex glove highlight */
  --art-grey: #A3ADBA; /* Other / unstated colour */
  --art-grey-shade: #838E9C; /* Other colour shade */
  --art-grey-deep: #5F6A78; /* Other colour outline */
  --art-grey-light: #CDD4DD; /* Other colour highlight */
  --art-gown: #C7DBF1; /* Isolation gown fabric */
  --art-gown-shade: #9DBCE0; /* Gown fold shade */
  --art-mask: #CFE2F4; /* Procedure mask */
  --art-mask-shade: #A8C6E6; /* Mask pleats */
  --art-n95: #F6F6F2; /* Respirator cup */
  --art-n95-shade: #DADBD3; /* Respirator shade */
  --art-strap: #5B8FD0; /* Straps and ear loops */
  --art-liquid: #B7D2EE; /* Sanitizer liquid */
  --art-bottle: #EEF3F8; /* Bottle body */
  --art-metal: #C3CCD7; /* Shelving / steel */
  --art-metal-shade: #9EAAB8; /* Shelving shade */
  --art-wood: #D8C3A0; /* Counter top */
  --art-wood-shade: #BFA67E; /* Counter front */
  --art-sheet: #FFFFFF; /* Document sheet */
  --art-sheet-line: #C9D2DC; /* Document lines */
  --art-check: #2F6E46; /* Check marks on documents */
  --art-line-on-dark: #3A5F8E; /* Diagram lines on navy */
  /* Translucent and composite values (resolved from the colors above) */
  --shadow-1: 0 1px 2px rgba(11, 37, 69, .06), 0 1px 1px rgba(11, 37, 69, .04); /* Elevation 1 (cards at rest) */
  --shadow-2: 0 1px 2px rgba(11, 37, 69, .05), 0 8px 22px -8px rgba(11, 37, 69, .16); /* Elevation 2 (records, pricing rail, open menu) */
  --shadow-3: 0 2px 6px rgba(11, 37, 69, .07), 0 22px 48px -16px rgba(11, 37, 69, .32); /* Elevation 3 (hero record over the navy stage) */
  --shadow-art: rgba(11, 37, 69, .16); /* Floor shadow under renders */
  --shadow-art-clear: rgba(11, 37, 69, 0); /* Floor shadow fade-out */
  --hatch-ph: rgba(128, 119, 106, .11); /* Diagonal hatch inside media placeholders */
  --hatch-avatar: rgba(128, 119, 106, .14); /* Hatch inside portrait placeholders */
  --hatch-exp: rgba(71, 81, 97, .16); /* Diagonal hatch fill of the Expired chip (grayscale-safe coding) */
  --grid-on-dark: rgba(255, 255, 255, .055); /* Blueprint grid lines on navy stages and bands */
  --grid-on-paper: rgba(11, 37, 69, .045); /* Blueprint grid lines on paper heads */
  --glow-on-dark: rgba(29, 79, 140, .55); /* Soft light in navy band gradients */
  --glow-clear: rgba(29, 79, 140, 0); /* Gradient fade-out */
  --fade-solid: #FFFFFF; /* Scroller edge fade (opaque end) */
  --fade-clear: rgba(255, 255, 255, 0); /* Scroller edge fade (transparent end) */
  --scroll-shadow: rgba(11, 37, 69, .16); /* Scroller overflow shadow */
  --scroll-shadow-clear: rgba(11, 37, 69, 0); /* Scroller overflow shadow end */
  --scrim-on-photo: rgba(11, 37, 69, .86); /* Credit line scrim over manufacturer photography (v4) */
  --on-dark-line: rgba(213, 224, 239, .30); /* Hairlines on navy bands */
  --on-dark-line-soft: rgba(213, 224, 239, .16); /* Soft hairlines on navy bands */
  --on-dark-underline: rgba(213, 224, 239, .45); /* Link underline on navy */
  --on-dark-chip-line: rgba(213, 224, 239, .55); /* Outlined chips on navy */
  --on-dark-ph-bg: rgba(255, 255, 255, .08); /* Placeholder mark on navy */
  --on-dark-ph-line: rgba(255, 255, 255, .55); /* Placeholder outline on navy */
  --on-dark-outline: rgba(255, 255, 255, .85); /* Outline button border on navy */
  --on-dark-hover: rgba(255, 255, 255, .08); /* Outline button hover on navy */
  --on-dark-tile: rgba(255, 255, 255, .06); /* Tiles and icon discs on navy */
  --swatch-edge: rgba(17, 27, 44, .35); /* Swatch outline */
  /* Inline icons used as CSS images (colors embedded; generated) */
  --icon-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111B2C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  --icon-step-done: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  /* Type families */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Lora", "Iowan Old Style", "Palatino Linotype", Palatino, "TeX Gyre Pagella", "Book Antiqua", Georgia, serif;
  --font-display: "Lora", "Iowan Old Style", "Palatino Linotype", Palatino, "TeX Gyre Pagella", "Book Antiqua", Georgia, serif;
  /* Type scale (P0: explanatory text >= 16px via --fs-body-sm; 15px is metadata only) */
  --fs-display: clamp(2.75rem, 1.35rem + 4.3vw, 4.75rem); /* 44 → 76px — Home H1 only */
  --fs-h1: clamp(2.125rem, 1.45rem + 2.4vw, 3.25rem); /* 34 → 52px — Page H1 (serif) */
  --fs-h2: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); /* 28 → 40px — Section H2 (serif) */
  --fs-h3: clamp(1.1875rem, 1.05rem + .45vw, 1.375rem); /* 19 → 22px — H3, card titles (sans) */
  --fs-h4: 1.125rem; /* 18px — H4, compact headings */
  --fs-lead: clamp(1.125rem, 1rem + .45vw, 1.3125rem); /* 18 → 21px — Lead paragraphs */
  --fs-body: 1.0625rem; /* 17px — Body text (floor for running prose) */
  --fs-body-sm: 1rem; /* 16px — Explanatory text: definitions, step and card descriptions, hints, notes, legend meanings (P0: never below 16px) */
  --fs-meta: .9375rem; /* 15px — Metadata only: dates, file types, captions, breadcrumbs, secondary table lines */
  --fs-table: .9375rem; /* 15px — Dense data-table cells (constraint: 14–16px allowed in tables) */
  --fs-label: .875rem; /* 14px — State chips and compact labels */
  --fs-overline: .8125rem; /* 13px — Uppercase tracked labels, eyebrows and table headers */
  --fs-price: clamp(2.25rem, 1.8rem + 1.5vw, 2.875rem); /* 36 → 46px — Private price figure (tabular numerals) */
  /* Measure (P0: prose <= 75 characters per line) */
  --measure: 54ch; /* Running prose: 54ch of Inter at 17px measures 66–74 characters per line (tools/audit.js); P0 cap ≤ 75 cpl */
  --measure-lead: 52ch; /* Lead paragraphs (larger size, so fewer ch) */
  --measure-narrow: 44ch; /* Short descriptions beside headings */
  /* Space (4-pt base) */
  --s-1: .25rem; /* 4px */
  --s-2: .5rem; /* 8px */
  --s-3: .75rem; /* 12px */
  --s-4: 1rem; /* 16px */
  --s-5: 1.5rem; /* 24px */
  --s-6: 2rem; /* 32px */
  --s-7: 3rem; /* 48px */
  --s-8: 4rem; /* 64px */
  --s-9: 6rem; /* 96px */
  --s-10: 8rem; /* 128px */
  --section-y: clamp(4rem, 2.5rem + 4.5vw, 6.5rem); /* 64 → 104px — Section rhythm */
  --section-y-tight: clamp(2.75rem, 1.75rem + 3vw, 4.5rem); /* 44 → 72px */
  --page-gutter: clamp(1rem, 5vw, 5rem); /* 16 → 80px — Side gutter (16px at phone width) */
  --grid-gap: clamp(1rem, .5rem + 1.6vw, 1.75rem); /* 16 → 28px */
  --container: 80rem; /* 1280px — Max content width */
  /* Radii — labels 4, controls 6, cards 10, stages 16 (never pills) */
  --r-1: 4px; /* Chips, tags and labels — label-like, never pills */
  --r-2: 6px; /* Buttons and form controls */
  --r-3: 10px; /* Cards, panels, records */
  --r-4: 16px; /* Illustration stages and hero panels */
}