/* ==========================================================================
   Mid-Florida Marine — Design Tokens
   Source of truth: Docs/sitemvp/DESIGN-SPEC.md (Diana Reyes, locked 2026-07-02)

   Hard rules:
   - Dark-only theme. This IS dark mode — no light variant.
   - No purple, anywhere. --salt is a blue at hue ~200; never let it drift violet.
   - Brass (--accent) is the ONLY CTA color. --fresh / --salt are environmental
     cues (eyebrows, thin rules) — never a second button color.
   - --text-muted (#8E9A9C) is the contrast floor. Never go lighter.
   - Spacing is the 8px system below. Tokens, never arbitrary values.
   ========================================================================== */

/* --- Self-hosted fonts (woff2, latin subset, weights per spec only) ------ */

@font-face {
  font-family: "Archivo Expanded";
  src: url("/assets/fonts/archivo-expanded-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo Expanded";
  src: url("/assets/fonts/archivo-expanded-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Color ------------------------------------------------------------ */
  --ink: #0E1416;              /* page background */
  --surface: #161F22;          /* card / section surface */
  --surface-raised: #1E292C;   /* raised card, form fields, hover surface */
  --border: #2B383C;           /* dividers, input borders, card edges */
  --border-strong: #3A4A4E;    /* emphasis borders */
  --text-primary: #F2EFE8;     /* body + headings (~15:1 on ink) */
  --text-secondary: #AEB8B9;   /* secondary copy, captions (~9:1 on ink) */
  --text-muted: #8E9A9C;       /* fine print only — the AA floor */
  --accent: #D19A54;           /* brass — the ONLY CTA/brand accent */
  --accent-hover: #E0AE6E;
  --accent-press: #B9843E;
  --on-accent: #0E1416;        /* text/icon on a brass button */
  --fresh: #4F9E76;            /* freshwater environmental cue (rules, borders, tints) */
  --salt: #2F7FA6;             /* saltwater environmental cue — blue, NOT violet (rules, borders, tints) */
  /* Text-cue variants: AA-verified (>=4.5:1) against --surface AND --ink for
     small text (eyebrows, labels). --salt at 3.75:1 on surface fails AA for
     13px text (M1 Lighthouse finding) — text always uses the *-text tokens;
     rules/borders keep the base cues. Hue 200 preserved — still not violet. */
  --fresh-text: #4F9E76;       /* 5.2:1 on surface — passes as-is */
  --salt-text: #4293BE;        /* 4.9:1 on surface, 5.4:1 on ink */
  --success: #4E9A6B;
  --warning: #D8A54E;
  --error: #D2685A;
  --focus: #E0AE6E;            /* focus ring — always visible, never removed */

  /* --- Typography --------------------------------------------------------- */
  --font-display: "Archivo Expanded", "Archivo", "Arial Narrow Bold", sans-serif;
  --font-heading: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --text-display: clamp(2.75rem, 6vw, 5rem);       /* Archivo Expanded 800 / 1.02 / -0.01em / UPPERCASE */
  --text-h1: clamp(2.25rem, 4.5vw, 3.5rem);        /* Archivo Expanded 700 / 1.06 / -0.01em */
  --text-h2: clamp(1.75rem, 3vw, 2.5rem);          /* Archivo 700 / 1.12 */
  --text-h3: 1.375rem;                             /* Archivo 600 / 1.25 */
  --text-eyebrow: 0.8125rem;                       /* Archivo 600 / 1.4 / 0.12em / UPPERCASE */
  --text-lead: 1.25rem;                            /* Inter 400 / 1.6 */
  --text-body: 1.125rem;                           /* Inter 400 / 1.65 — 18px premium body */
  --text-small: 0.9375rem;                         /* Inter 400 / 1.5 */

  --leading-display: 1.02;
  --leading-h1: 1.06;
  --leading-h2: 1.12;
  --leading-h3: 1.25;
  --leading-eyebrow: 1.4;
  --leading-lead: 1.6;
  --leading-body: 1.65;
  --leading-small: 1.5;

  --tracking-tight: -0.01em;
  --tracking-eyebrow: 0.12em;

  /* --- Spacing (8px base; 4px sub-unit for tight internal padding only) --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;
  --space-9: 128px;

  /* --- Radius (restrained — premium reads tight) -------------------------- */
  --radius-button: 4px;
  --radius-card: 8px;
  --radius-input: 4px;
  --radius-badge: 4px;
  --radius-full: 9999px;

  /* --- Elevation (dark UI: surface steps + borders first, shadow sparingly) */
  --shadow-low: 0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-medium: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-high: 0 20px 60px rgba(0, 0, 0, 0.55);

  /* --- Motion ------------------------------------------------------------- */
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --duration-hover: 150ms;   /* hover: color, border, transform */
  --duration-drawer: 300ms;  /* mobile drawer slide/fade */
  --duration-reveal: 400ms;  /* scroll reveal — DEFAULT STATE IS opacity:1 */

  /* --- Layout ------------------------------------------------------------- */
  --container-max: 1200px;
  --gutter: 24px;            /* 16px applied at mobile in main.css */
  --touch-target: 44px;      /* minimum tappable size, everywhere */
  --header-height: 72px;

  /* --- Scrim (text-over-image contrast mechanism, used from M2 on) -------- */
  /* M4 PRUNE (2026-07-03, Diana-approved): --scrim-bottom removed — it was
     never referenced by a rule (grep-verified across src/ before removal;
     an undefined-var risk is worse than a missing token). If a future
     caption-over-image surface needs a shallower scrim than --scrim-hero,
     re-add it from the DESIGN-SPEC Image+Scrim component definition
     (rgba(14,20,22,0.75) → 0, bottom-up) and reference it the same day. */
  /* Hero variant (M2, Diana-approved system extension): display type sits
     higher over the image than a caption, so the gradient needs a stronger
     floor and a taller throw. AA verified against the real hero images —
     the scrim is the contrast mechanism, not decoration. */
  /* FIX-M2-002: mid-throw deepened (0.85→0.88 @28%, 0.45→0.60 @55%) after
     per-glyph measurement against the live hero put the brass eyebrow at
     4.42:1 — below the 4.5 floor. Re-measured 4.9:1 worst-case after. */
  --scrim-hero: linear-gradient(
    to top,
    rgba(14, 20, 22, 0.98) 0%,
    rgba(14, 20, 22, 0.88) 28%,
    rgba(14, 20, 22, 0.60) 55%,
    rgba(14, 20, 22, 0) 80%
  );
}