/* Hauling Auto: V2 design tokens (single source of truth)
   Brand: Charcoal · White · Orange. No other hues except error/success/prototype-amber.
   Breakpoints (media queries can't read variables, so these are the only ones used):
     lg ≤ 1120px · md ≤ 920px (nav collapses, hero stacks) · sm ≤ 640px (phone)
   Contrast (WCAG 2.x, measured):
     #FFFFFF on #C8410E 4.98 · on #B23A0B 5.99 · #C8410E on #FFFFFF 4.98, on #F6F7F9 4.64
     #15181D on #FFFFFF 17.8 · #5B6472 on #FFFFFF 5.98 · on #F6F7F9 5.6
     #FF7A45 on #15181D 6.88 · #A3ABB7 on #15181D 7.4 · #FFFFFF on #15181D 17.8
   #FF672A is decorative / large display text / on charcoal only (2.9:1 on white: never small text on white). */

/* Inter variable 100–900, Latin subset, self-hosted. SIL OFL 1.1 (assets/fonts/OFL-LICENSE.txt) */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Metric-matched fallback: avoids layout shift while Inter loads */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22.4%;
  line-gap-override: 0%;
}

:root {
  /* ---- Brand ---- */
  --charcoal: #15181D;          /* primary dark, body text */
  --charcoal-raised: #1C2027;   /* raised dark surfaces, cards on dark */
  --charcoal-deep: #0F1114;     /* footer, utility bar */
  --charcoal-line: #2C323C;     /* borders/dividers on dark */
  --orange: #FF672A;            /* decorative accent */
  --orange-on-dark: #FF7A45;    /* small orange text on charcoal */
  --cta: #C8410E;               /* primary buttons, links on light */
  --cta-hover: #B23A0B;
  --orange-tint: #FFF4EE;       /* selected options, icon wells */
  --white: #FFFFFF;
  --gray-50: #F6F7F9;           /* alternate sections */
  --gray-200: #E3E6EB;          /* borders on light */
  --gray-300: #CDD2D9;          /* input borders */
  --text: #15181D;
  --text-muted: #5B6472;
  --text-on-dark: #FFFFFF;
  --text-muted-on-dark: #A3ABB7;

  /* ---- Status (functional only) ---- */
  --error: #B42318;             /* 6.5:1 on white */
  --success: #1F7A4D;           /* 5.4:1 on white */
  --proto-amber: #8A5A00;       /* prototype placeholder pills, removed in production */
  --proto-amber-bg: #FFF6DB;

  /* ---- Focus ---- */
  --focus-ring: 0 0 0 3px #FFFFFF, 0 0 0 5px #C8410E;          /* on light */
  --focus-ring-dark: 0 0 0 3px #15181D, 0 0 0 5px #FF7A45;     /* on charcoal */

  /* ---- Typography ---- */
  --font: "Inter", "Inter Fallback", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --fs-display: clamp(2.375rem, 1.5rem + 3.6vw, 4.125rem);  /* H1 */
  --fs-h2: clamp(1.875rem, 1.45rem + 1.8vw, 2.75rem);
  --fs-h3: 1.1875rem;
  --fs-lead: 1.0625rem;
  --fs-body: 1rem;
  --fs-small: .875rem;
  --fs-xs: .75rem;              /* minimum size used anywhere */
  --lh-tight: 1.08;
  --lh-heading: 1.15;
  --lh-body: 1.65;
  --tracking-display: -.035em;
  --tracking-eyebrow: .16em;

  /* ---- Layout & spacing (4px scale) ---- */
  --wrap: 1216px;
  --gutter: 24px;
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --section-y: clamp(64px, 4vw + 40px, 104px);
  --header-h: 76px;

  /* ---- Shape & depth ---- */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-pill: 999px;
  --shadow-sm: 0 2px 8px rgba(15, 17, 20, .06);
  --shadow-md: 0 14px 34px rgba(15, 17, 20, .10);
  --shadow-lg: 0 28px 80px rgba(0, 0, 0, .32);
  --shadow-cta: 0 10px 24px rgba(200, 65, 14, .26);

  /* ---- Motion ---- */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: .18s;
}

@media (max-width: 640px) {
  :root { --gutter: 16px; --header-h: 64px; --section-y: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0s; }
}