/* Design tokens — source of truth is DESIGN.md. Keep this file and that
   doc in sync; don't hardcode a hex value anywhere else in the codebase. */

/* Metric-matched fallback for Inter. Inter arrives after first paint (its stylesheet is
   loaded non-blocking) and is ~5% wider than the system font, so the swap nudged the header
   nav, search and WhatsApp button (CLS 0.05 in Lighthouse desktop). This face is Arial
   scaled to Inter's widths, so the swap moves nothing. Numbers are measured, not borrowed:
   canvas advance widths of the site's own copy, Inter ÷ Arial — 400 → 1.053, 500 → 1.063
   (regular face, 105.8%); 600 → 1.009, 700 → 1.018 (bold face, 101.3%). Ascent/descent are
   Inter's hhea metrics (96.875% / 24.12% of the em) ÷ size-adjust, line-gap 0, so
   `line-height: normal` boxes match too. Only platforms that ship Arial (Windows, macOS, iOS)
   use it; elsewhere the stack falls through to system-ui exactly as before. If the copy or
   weights change a lot, re-measure — don't tweak by eye. */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("ArialMT");
  font-weight: 400 500;
  size-adjust: 105.8%;
  ascent-override: 91.6%;
  descent-override: 22.8%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT");
  font-weight: 600 800;
  size-adjust: 101.3%;
  ascent-override: 95.6%;
  descent-override: 23.8%;
  line-gap-override: 0%;
}

:root {
  /* Palette — client-supplied 2026-09-21: Navy Blue, Electric Blue, White &
     Charcoal Grey. Gold exists only inside the logo artwork. */
  --color-navy: #0B1D4A;
  --color-navy-deep: #071433;
  --color-primary: #2563EB;                 /* Electric Blue — interactive */
  --color-primary-hover: color-mix(in srgb, var(--color-primary) 84%, black);
  --color-primary-tint: #E8F0FE;
  --color-electric-light: #6EA8FF;          /* accents/links on navy */
  --color-success: #12793C;
  --color-error: #C43B2E;
  --color-warning: #8A5A00;
  --color-warning-tint: #FFF4DB;
  --color-bg: #FFFFFF;
  --color-section-tint: #F3F6FB;
  --color-text: #1F2933;                    /* Charcoal */
  --color-text-muted: #5B6470;
  --color-on-navy: #FFFFFF;
  --color-on-navy-muted: rgba(255, 255, 255, 0.74);
  --color-border: rgba(31, 41, 51, 0.12);
  --color-border-strong: rgba(31, 41, 51, 0.24);
  /* Boundary of a form control. WCAG 1.4.11 wants 3:1 against the surface;
     --color-border-strong is only 1.6:1. This is 3.5:1 on white, 3.4:1 on the
     section tint. Decorative dividers and outline buttons keep the lighter one. */
  --color-border-input: rgba(31, 41, 51, 0.55);
  --color-border-on-navy: rgba(255, 255, 255, 0.16);

  /* Typography — client picked "Modern & Tech-Focused (Roboto / Inter)".
     Inter is loaded from Google Fonts in head-meta.php; the rest of the
     stack is the fallback while it loads. No monospace anywhere: MPN/SKU
     cells use tabular figures instead (.tnum). */
  --font-body: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;
  --space-10: 64px;
  --space-12: 96px;

  --container-max: 1440px;
  --header-tier1-h: 38px;
  --header-tier2-h: 76px;
  --header-tier3-h: 50px;
  --shadow-sm: 0 1px 2px rgba(11, 29, 74, 0.08);
  --shadow-md: 0 8px 24px rgba(11, 29, 74, 0.10);
  --shadow-lg: 0 20px 48px rgba(11, 29, 74, 0.18);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.38);
}