/* DigLTBlue design tokens.
   Every value is lifted from the `Homepage V2.dc.html` canvas (desktop 1440 /
   mobile 400 artboards). The design draws with literal hex and rgba() inline on
   each node; this file is the single place those literals are named, and no
   other stylesheet may introduce an ad-hoc colour.

   The two brand constants are the whole identity:
     #001543  navy — chrome, dark bands, all body copy on light
     #F45900  orange — every accent, rule, CTA and hover
*/

:root {
  /* ── Color: brand ───────────────────────────────────────────────── */
  --color-navy: #001543; /* topnav, hero, safety band, footer, ALL body copy on light */
  --color-orange: #f45900; /* CTAs, accent rules, kickers, arrows, links */
  --color-white: #fff;

  /* Aliases kept so shared partials (interior pages, search, 404) that were
     written against the LT-Prime vocabulary keep resolving. Same hex, second
     name — not a second colour. */
  --color-ink: var(--color-navy);
  --color-body: var(--color-navy);
  --color-brand: var(--color-orange);
  --color-brand-2: var(--color-orange);
  --color-body-dark: var(--color-on-navy-soft); /* body copy on dark bands */

  /* Layout aliases for the same reason — pages.css sizes the interior title
     band and prose column with these names. An undefined var() invalidates the
     whole declaration it sits in, which is how the 404's title band lost its
     padding entirely; keep every name pages.css uses defined here. */
  --content-prose: 880px; /* interior prose column */
  --pad-y-statement: 72px; /* interior title band */

  /* ── Color: neutrals ────────────────────────────────────────────── */
  --color-canvas: #e9e8e4; /* page background behind the 1440 frame */
  --color-surface: #fff; /* default section background */
  --color-surface-alt: rgba(
    219,
    219,
    219,
    0.4
  ); /* capability index + proof band wash */
  --color-placeholder: #dbdbdb; /* image slots, footer link text on navy, logo plates */
  --color-line: #dbdbdb; /* card + panel borders on light */
  --color-line-strong: #c3c3c3; /* capability index + trusted-by row rules */
  --color-line-soft: rgba(219, 219, 219, 0.6); /* dropdown item dividers */
  --color-dropdown-active: rgba(219, 219, 219, 0.3);
  --color-muted: rgba(0, 21, 67, 0.55); /* "PENDING" annotations on light */

  /* ── Color: on navy ─────────────────────────────────────────────── */
  --color-on-navy: #fff;
  --color-on-navy-body: rgba(255, 255, 255, 0.92); /* safety-band prose */
  --color-on-navy-soft: rgba(255, 255, 255, 0.85); /* footer address + hours */
  --color-on-navy-dim: rgba(255, 255, 255, 0.8); /* topnav secondary text */
  --color-on-navy-muted: rgba(255, 255, 255, 0.45); /* footer "PENDING" note */
  --color-on-navy-label: rgba(
    255,
    255,
    255,
    0.35
  ); /* hero media placeholder label */
  --color-line-on-navy: rgba(255, 255, 255, 0.3); /* topnav pipe divider */
  --color-line-footer: rgba(255, 255, 255, 0.2); /* footer bottom-bar rule */
  --color-social-plate: rgba(255, 255, 255, 0.25); /* footer social square */

  /* ── Overlays & gradients ───────────────────────────────────────── */
  --hero-scrim: linear-gradient(
    180deg,
    rgba(0, 21, 67, 0.35),
    rgba(0, 21, 67, 0.88)
  );
  --caption-scrim: rgba(
    0,
    21,
    67,
    0.92
  ); /* photo caption plate, environments grid */
  --band-scrim: rgba(0, 21, 67, 0.7); /* careers band over photo */
  --shadow-nav: 0 2px 12px rgba(0, 21, 67, 0.1);
  --shadow-dropdown: 0 16px 32px rgba(0, 21, 67, 0.18);

  /* ── Type: families ─────────────────────────────────────────────── */
  --font-display: "Oswald", "Oswald Fallback", sans-serif;
  --font-body: "Montserrat", system-ui, -apple-system, sans-serif;
  --weight-display: 500; /* every Oswald node in the mock is 500 */
  --weight-label: 600; /* nav, buttons, kickers, micro-labels */

  /* ── Type: display scale (Oswald 500, uppercase, ls .02em) ──────── */
  --fs-hero: 88px; /* h1 */
  --fs-display: 42px; /* section headings */
  --fs-display-sm: 28px; /* two-up sub-headings, panel headings */
  --fs-title: 24px; /* capability row title */
  --fs-title-sm: 20px; /* caption plate, large */
  --fs-title-xs: 18px; /* caption plate small, footer column headings */
  --lh-hero: 1.05;
  --ls-display: 0.01em;

  /* ── Type: text scale (Montserrat) ──────────────────────────────── */
  --fs-lead: 18px; /* hero standfirst */
  --fs-body: 16px; /* section prose */
  --fs-body-sm: 15px; /* two-up prose, county list */
  --fs-meta: 14px; /* credential strip, capability desc, footer links */
  --fs-nav: 13px; /* nav links, buttons, kickers */
  --fs-small: 12px; /* topnav, footer bottom bar */
  --fs-micro: 11px; /* caption eyebrows, image-slot labels */
  --fs-nano: 10px; /* "PENDING" annotations */
  --lh-prose: 1.75;
  --lh-meta: 1.65;
  --lh-tight: 1.5;

  /* ── Type: tracking ─────────────────────────────────────────────── */
  --ls-kicker: 0.18em; /* hero eyebrow */
  --ls-caption: 0.14em; /* caption eyebrows, micro labels */
  --ls-button: 0.1em; /* every button */
  --ls-nav: 0.08em; /* nav links */
  --ls-dropdown: 0.06em; /* dropdown items */
  --ls-plate: 0.12em; /* logo plate label */

  /* ── Layout ─────────────────────────────────────────────────────── */
  /* The mock is a fixed 1440 frame with 86px gutters. On a real viewport the
     gutter scales but never exceeds the drawn 86px, and the inner column is
     capped at the mock's own content width (1440 - 2 x 86) so wider monitors
     get margin rather than 1900px-long measure. */
  --pad-x: clamp(16px, 6vw, 86px);
  --content-max: 1268px;
  --pad-y: 96px; /* standard section rhythm */
  --pad-y-lg: 96px;
  --hero-h: 820px;
  --topnav-h: 40px;
  --header-h: 96px; /* the bar's floor; a taller logo stretches it */
  --nav-logo-w: 160px;
  --band-h: 320px; /* careers band */
  --prose-max: 880px; /* section intro copy */
  --prose-max-wide: 900px; /* safety-band prose */

  /* ── Accent rules ───────────────────────────────────────────────── */
  --rule-h: 2px; /* every accent rule in V2 is 2px, full width */
  --rule-w-footer: 40px;
  --rule-w-centered: 200px; /* closing CTA */

  /* ── Buttons ────────────────────────────────────────────────────── */
  --btn-pad: 16px 28px; /* solid */
  --btn-pad-outline: 14px 26px; /* outline — 2px border keeps the box identical */
  --btn-border-w: 2px;

  /* ── Motion ─────────────────────────────────────────────────────── */
  --t-fast: 150ms;
  --t-med: 200ms;
  --t-slow: 300ms;
  --ease: ease;

  /* ── Layering ───────────────────────────────────────────────────── */
  --z-nav: 50;
  --z-overlay: 60;
  --z-dropdown: 5;
  --z-lift: 2; /* credential strip pulled over the hero */

  /* ── Focus ──────────────────────────────────────────────────────── */
  --focus-ring-width: 2px;
  --focus-ring-color: var(--color-orange);
  --focus-offset: 2px;

  /* ── Runtime values (written by nav.js) ─────────────────────────── */
  --lt-drawer-h: 0px;
}

/* Tablet (<1024px). The hero and the fixed-height bands lose their drawn
   heights first; the type scale follows at the mobile step. */
@media (max-width: 1023px) {
  :root {
    --fs-hero: 60px;
    --fs-display: 34px;
    --fs-display-sm: 24px;
    --hero-h: 680px;
    --pad-y: 72px;
  }
}

/* Mobile (<640px) — the 400 artboard. Gutters, rhythm and the display scale all
   shrink here so no component stylesheet has to restate them. */
@media (max-width: 639px) {
  :root {
    --fs-hero: 44px;
    --fs-display: 28px;
    --fs-display-sm: 22px;
    --fs-title: 20px;
    --fs-lead: 14px;
    --fs-body: 14px;
    --fs-body-sm: 14px;
    --fs-meta: 12px;
    --fs-nav: 12px;
    --lh-hero: 1.08;
    --lh-prose: 1.7;
    --lh-meta: 1.6;
    --pad-y: 64px;
    --hero-h: 560px;
    --topnav-h: 36px;
    --header-h: 64px;
    --band-h: 280px;
  }
}