/* ==========================================================================
   EVXEMS — Design Tokens
   1:1 implementation of the approved Enterprise Design System (Tier 0)
   + EVXEMS Brand System (Tier 1). Framework-neutral CSS custom properties.
   DO NOT introduce values outside these scales without design review.
   Source of truth:
     - 2026-07-09 - Operations - Enterprise Design System.md (Tier 0)
     - 2026-07-09 - Emergency Vehicle Exchange - EVXEMS Brand System.md (Tier 1)
     - 2026-07-09 - EVXEMS High-Fidelity UX Specification.md (§A1)
   ========================================================================== */

/* ---- Fonts. All self-hosted (no external font CDN). Display/heading faces are
        the brand faces; body is PT Sans Caption (SIL OFL, self-hosted here). */
@font-face {
  font-family: "Heavitas";
  src: url("../assets/fonts/Heavitas.ttf") format("truetype");
  font-weight: normal;
  font-display: swap;
}
@font-face {
  font-family: "League Gothic";
  src: url("../assets/fonts/League_Gothic.otf") format("opentype");
  font-weight: normal;
  font-display: swap;
}
@font-face {
  font-family: "PT Sans Caption";
  src: url("../assets/fonts/pt-sans-caption-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "PT Sans Caption";
  src: url("../assets/fonts/pt-sans-caption-700.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  /* ===== Tier 1 — EVXEMS color (confirmed hex, pixel-verified) ===== */
  --evx-navy:        #003366;  /* primary */
  --evx-yellow:      #FFD700;  /* accent — one per view, never body text */
  --evx-cyan:        #00CCFF;  /* secondary / links / info */
  --evx-beacon-red:  #E60000;  /* danger only */
  --evx-white:       #FFFFFF;
  --evx-black:       #000000;

  /* Fleet Grey neutral scale */
  --grey-100: #F5F6F7;  /* section/card fills, table headers, disabled fill */
  --grey-400: #8A9199;  /* borders, secondary text, metadata, disabled text */
  --grey-700: #2B3238;  /* body text on light (primary reading color) */

  /* Status */
  --status-success: #2E8B57;
  --status-warning: #FFD700;
  --status-danger:  #E60000;
  --status-info:    #00CCFF;

  /* Derived hover tints + overlays (not new brand colors) */
  --navy-hover:   #002a52;              /* ~8% darken of navy for button hover */
  --yellow-hover: #E6C200;              /* ~8% darken of yellow for on-dark button hover */
  --navy-overlay: rgba(0, 51, 102, .30);/* hero image scrim */

  /* ===== Tier 0 — Spacing scale (8px base) ===== */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-24: 96px;

  /* ===== Tier 0 — Radius scale ===== */
  --radius-chip:   4px;
  --radius-button: 8px;
  --radius-card:   12px;
  --radius-modal:  16px;
  --radius-full:   9999px;

  /* ===== Tier 0 — Elevation (navy-tinted) ===== */
  --shadow-sm: 0 1px 2px  rgba(0, 51, 102, .08);
  --shadow-md: 0 4px 12px rgba(0, 51, 102, .12);
  --shadow-lg: 0 12px 32px rgba(0, 51, 102, .16);

  /* ===== Tier 0 — Motion ===== */
  --motion-fast:  150ms ease-out;  /* hover/press */
  --motion-med:   250ms ease-out;  /* panels/modals */
  --motion-flash: 300ms ease-out;  /* the ONE signature moment: Sold flash */

  /* ===== Tier 0/1 — Type roles ===== */
  --font-display: "Heavitas", "Arial Black", sans-serif;         /* hero/marketing only */
  --font-heading: "League Gothic", "Oswald", "Arial Narrow", sans-serif; /* headings/labels/tags */
  --font-body:    "PT Sans Caption", "Helvetica Neue", Arial, sans-serif; /* all body/UI */

  --type-display-lg: 48px/56px var(--font-display);
  --type-display-md: 32px/40px var(--font-display);
  --type-heading:    24px/32px var(--font-heading);
  --type-subheading: 18px/28px var(--font-heading);
  --type-body:       16px/24px var(--font-body);
  --type-body-sm:    14px/20px var(--font-body);
  --type-caption:    12px/16px var(--font-body);

  /* ===== Layout constants (from spec §A2 — stated design constants) ===== */
  --container-max: 1280px;
  --gutter:        24px;
  --margin-outer:  32px;
  --header-utility-h: 40px;
  --header-main-h:    72px;
  --header-mobile-h:  56px;

  /* ===== Z-index bands (Tier 0) ===== */
  --z-base:     0;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
  --z-tooltip:  600;

  /* Focus ring (accessibility floor — visible focus on all interactive) */
  --focus-ring: 0 0 0 2px var(--evx-white), 0 0 0 4px var(--evx-cyan);
}

@media (max-width: 1023px) { :root { --gutter: 24px; --margin-outer: 24px; } }
@media (max-width: 767px)  { :root { --gutter: 16px; --margin-outer: 16px; } }