/*
 * CADOpt design tokens
 * Values transcribed directly from "CADOpt Style Guide" v1.0, July 2026
 * (brand blue ramp, graphite ramp, semantic colors, gradients, shadows,
 * type scale, spacing scale, radii, motion durations).
 * Do not hand-edit hex values here without checking the source guide first.
 */
:root{

  /* ---- Brand Blue Ramp ---- */
  --blue-950:#0a3a66;
  --blue-900:#0f4c81;
  --blue-800:#145a94;
  --blue-700:#1a6aa8;
  --blue-600:#1e72ab;
  --blue-500:#2e8bc4;
  --blue-400:#3ea1d9;
  --blue-300:#6cbfe6;
  --blue-200:#a6dbf1;
  --blue-100:#d3edf9;
  --blue-50:#eef8fd;

  /* ---- Graphite Ramp ---- */
  --graphite-950:#1c2126;
  --graphite-900:#262b31;
  --graphite-800:#33393f;
  --graphite-700:#3d3d3d;
  --graphite-600:#55606a;
  --graphite-500:#6f7a85;
  --graphite-400:#97a2ac;
  --graphite-300:#c2c9cf;
  --graphite-200:#dde2e6;
  --graphite-150:#e8ebee;
  --graphite-100:#f1f4f6;
  --graphite-50:#f7f9fb;
  --white:#ffffff;

  /* ---- Semantic status (muted/technical, never bright/playful) ---- */
  --success:#1f8a5b;
  --warning:#c9821b;
  --danger:#cf4141;
  --info:#1e72ab;
  --danger-100:#fbe8e8;
  --success-100:#e4f3ec;
  --warning-100:#faf0e0;

  /* ---- Semantic aliases (implementation mapping onto the ramps above) ---- */
  --brand:var(--blue-700);
  --brand-bright:var(--blue-500);
  --brand-on-dark:var(--blue-300);
  --text-strong:var(--graphite-900);
  --text-body:var(--graphite-700);
  --text-muted:var(--graphite-500);
  --text-subtle:var(--graphite-400);
  --surface-page:var(--white);
  --surface-sunken:var(--graphite-50);
  --surface-brand-soft:var(--blue-50);
  --border-subtle:var(--graphite-150);
  --border-strong:var(--graphite-300);

  /* ---- Signature gradients ---- */
  --grad-blade:linear-gradient(120deg,#0f4c81 0%,#1e72ab 45%,#3ea1d9 100%);
  --grad-ink:linear-gradient(150deg,#262b31 0%,#0a3a66 100%);
  --grad-blade-soft:linear-gradient(120deg,#eef8fd 0%,#d3edf9 100%);

  /* ---- Elevation ---- */
  --shadow-sm:0 1px 3px rgba(28,33,38,.08),0 1px 2px rgba(28,33,38,.05);
  --shadow-md:0 4px 14px rgba(20,45,75,.08),0 2px 4px rgba(28,33,38,.05);
  --shadow-lg:0 14px 34px rgba(15,45,80,.12),0 4px 10px rgba(20,45,75,.06);
  --shadow-brand:0 12px 30px rgba(30,114,171,.28);

  /* ---- Typography ---- */
  --font-brand:"Century Gothic","CenturyGothicWeb","Jost",sans-serif;
  --font-body:"Century Gothic","CenturyGothicWeb","Jost",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;

  --fs-h1:36px; --fw-h1:700; --lh-h1:1.06;
  --fs-h2:28px; --fw-h2:700; --lh-h2:1.1;
  --fs-h3:22px; --fw-h3:600; --lh-h3:1.2;
  --fs-h4:18px; --fw-h4:600; --lh-h4:1.3;
  --fs-lead:16px; --fw-lead:400; --lh-lead:1.55;
  --fs-body:14px; --fw-body:400; --lh-body:1.5;
  --tracking-headline:-0.01em;
  --tracking-eyebrow:0.16em;
  --measure:68ch;

  /* ---- Spacing (4px base grid) ---- */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-8:32px; --space-12:48px; --space-16:64px;
  --container-md:1200px;
  --container-lg:1360px;
  --section-rhythm:clamp(64px,8vw,128px);
  --gutter:clamp(20px,4vw,64px);

  /* ---- Radii ---- */
  --radius-xs:3px; --radius-sm:6px; --radius-md:10px; --radius-lg:16px; --radius-xl:24px; --radius-pill:26px;

  /* ---- Motion ---- */
  --duration-fast:120ms; --duration-base:200ms; --duration-slow:340ms; --duration-slower:600ms;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --focus-ring:0 0 0 3px var(--blue-300);

  /* ---- Header / layered UI (mega menu, drawer) ---- */
  --header-h:92px;
  --header-h-scrolled:84px;
  --z-header:100;
  --z-panel:110;
  --z-scrim:120;
  --z-drawer:130;

  /* ---- Mega menu typography (2026-09-08 global consistency fix) ----
   * One shared type scale for every mega/dropdown menu (Company, Products,
   * Services, Industries, Resources, Support) and their mobile accordion
   * equivalents. Before this, each menu's markup carried its own
   * hand-picked font-size/weight (14–16px primary items, 12–16px
   * descriptions, 13–14px submenu links, one at 700 weight) — these three
   * tokens are now the single source of truth every mega-menu selector
   * below points at, so no menu can drift from another again. Values
   * chosen close to the existing majority (not the single largest/
   * smallest outlier) specifically to avoid reflowing any fixed-width
   * panel — this is a typography-only fix, not a layout change.
   */
  --mega-item-size:16px;    --mega-item-weight:600; --mega-item-line:1.4;
  --mega-subitem-size:14px; --mega-subitem-weight:500; --mega-subitem-line:1.4;
  --mega-desc-size:13px;    --mega-desc-weight:400; --mega-desc-line:1.5;
}

@media (prefers-reduced-motion:reduce){
  :root{
    --duration-fast:0ms; --duration-base:0ms; --duration-slow:0ms; --duration-slower:0ms;
  }
}