/* =====================================================================
   High Country Fleet Card — Design Tokens
   Brand values are canonical (see brand_assets/brand-guidelines.md).
   The brand runs DARK: Pine + Saddle ~70% of surfaces.
   Trail Orange = CTA accent only. Harvest Gold = emphasis, sparingly.
   ===================================================================== */

:root {
  /* ---- Brand color palette (official) ---- */
  --pine:          #243829; /* Deep Pine — signature ground */
  --pine-soft:     #3B5240; /* charts, icons, supporting */
  --saddle:        #47362E; /* Saddle Brown — warm dark */
  --espresso:      #1C1512; /* deepest neutral — footers, overlays */
  --trail-orange:  #C6611D; /* primary CTA / highlight */
  --harvest-gold:  #D9A441; /* headline accents, dividers */
  --slate:         #5B6770; /* secondary UI */
  --stone:         #E7DFD2; /* light surface */
  --bone:          #F3EFE6; /* primary text & light bg */

  /* Derived / tonal helpers (kept on-palette) */
  --pine-900:      #1b2b20;
  --pine-700:      #2c4533;
  --orange-bright: #e0772f;
  --orange-deep:   #a84f15;
  --gold-soft:     #e6bd6c;

  /* Alpha utilities */
  --bone-90: rgba(243,239,230,.90);
  --bone-70: rgba(243,239,230,.70);
  --bone-55: rgba(243,239,230,.55);
  --bone-40: rgba(243,239,230,.40);
  --bone-12: rgba(243,239,230,.12);
  --bone-08: rgba(243,239,230,.08);
  --bone-04: rgba(243,239,230,.04);
  --gold-30: rgba(217,164,65,.30);
  --gold-16: rgba(217,164,65,.16);
  --gold-08: rgba(217,164,65,.08);
  --orange-30: rgba(198,97,29,.30);
  --ink-shadow: rgba(15,11,9,.55);

  /* ---- Typography ---- */
  --font-display: "Oswald", "Arial Narrow", sans-serif;
  --font-body:    "Poppins", system-ui, -apple-system, sans-serif;
  --font-accent:  "Zilla Slab", Georgia, serif;

  /* Fluid type scale (mobile -> desktop) */
  --fs-display: clamp(2.75rem, 1.7rem + 5.2vw, 5.25rem);
  --fs-h1:      clamp(2.35rem, 1.6rem + 3.6vw, 4rem);
  --fs-h2:      clamp(1.9rem,  1.45rem + 2.2vw, 3rem);
  --fs-h3:      clamp(1.45rem, 1.25rem + 1vw, 2rem);
  --fs-h4:      clamp(1.18rem, 1.08rem + 0.5vw, 1.4rem);
  --fs-lead:    clamp(1.075rem, 1rem + 0.45vw, 1.3rem);
  --fs-body:    clamp(1rem, 0.97rem + 0.12vw, 1.0625rem);
  --fs-sm:      0.9375rem;
  --fs-xs:      0.8125rem;
  --fs-kicker:  clamp(0.7rem, 0.66rem + 0.18vw, 0.8rem);

  --lh-tight:   1.02;
  --lh-snug:    1.16;
  --lh-body:    1.62;
  --tracking-kicker: 0.42em;
  --tracking-display: -0.012em;

  /* ---- Spacing ---- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
  --sp-9: 6rem;
  --section-y: clamp(4.5rem, 3rem + 7vw, 9rem);
  --gutter: clamp(1.25rem, 5vw, 3rem);

  /* ---- Layout ---- */
  --container: 1240px;
  --container-narrow: 920px;
  --container-wide: 1400px;

  /* ---- Radii ---- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-pill: 999px;

  /* ---- Borders ---- */
  --hair: 1px solid var(--bone-12);
  --hair-gold: 1px solid var(--gold-30);

  /* ---- Warm-tinted, layered shadows ---- */
  --shadow-xs: 0 1px 2px rgba(15,11,9,.4);
  --shadow-sm: 0 4px 14px rgba(15,11,9,.35);
  --shadow-md: 0 18px 40px rgba(15,11,9,.45), 0 4px 10px rgba(15,11,9,.30);
  --shadow-lg: 0 44px 120px rgba(15,11,9,.6), 0 12px 28px rgba(15,11,9,.4);
  --shadow-orange: 0 14px 34px rgba(198,97,29,.40), 0 4px 10px rgba(168,79,21,.35);
  --shadow-card: 0 30px 80px rgba(15,11,9,.55), 0 6px 16px rgba(15,11,9,.4);

  /* ---- Motion ---- */
  --ease-spring: cubic-bezier(.22,.84,.32,1);
  --ease-out:    cubic-bezier(.16,1,.3,1);
  --t-fast: 0.18s;
  --t-base: 0.32s;
  --t-slow: 0.6s;

  /* ---- z-index ---- */
  --z-nav: 100;
  --z-menu: 200;
  --z-overlay: 50;
}