/* ==============================================
   CUMBERLAND VALLEY HAULING — Design Tokens
   ============================================== */

:root {
  /* Colors — Brand
     navy   #1B2436 — ink / dark surfaces
     amber  #E8A317 — accent
     cream  #F4EFE3 — reversed text on dark
     bg     #f0eee9 — warm off-white page background */
  --color-navy: #1B2436;
  --color-amber: #E8A317;
  --color-cream: #F4EFE3;
  --color-bg: #f0eee9;

  /* Brand — supporting shades */
  --color-navy-deep: #131C2B;   /* hero gradient midpoint */
  --color-steel: #2C3A52;       /* lifted navy for gradients */
  --color-amber-hover: #C98C12;
  --color-amber-light: #F2BB3E;

  /* Aliases (kept so existing rules keep resolving) */
  --color-primary-dark: var(--color-navy);
  --color-charcoal: var(--color-navy);
  --color-off-white: var(--color-bg);

  /* Colors — Neutral */
  --color-white: #ffffff;
  --color-gray-light: #b0b0b8;
  --color-gray: #6b6b78;
  --color-earth: #8b7355;
  --color-border: #dcd7cd;      /* warm hairline, sits with --color-bg */
  --color-placeholder: #b5afa4;

  /* Colors — State */
  --color-success: #4caf50;
  --color-error: #e74c3c;

  /* Typography — Families */
  --font-heading: 'Oswald', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-accent: 'Oswald', sans-serif;

  /* Typography — Sizes (fluid) */
  --text-hero: clamp(1.75rem, 5vw, 4.25rem);
  --text-h1: clamp(2rem, 4vw, 3.5rem);
  --text-h2: clamp(1.5rem, 3vw, 2.5rem);
  --text-h3: clamp(1.125rem, 2vw, 1.375rem);
  --text-body: clamp(0.975rem, 1.2vw, 1.1rem);
  --text-small: 0.875rem;
  --text-label: 0.8125rem;

  /* Typography — Line Heights */
  --line-height-heading: 1.05;
  --line-height-body: 1.7;
  --letter-spacing-heading: 0.02em;
  --letter-spacing-wide: 0.18em;

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 6rem;
  --space-2xl: 8rem;

  /* Layout */
  --container-max: 1200px;
  --container-wide: 1400px;
  --nav-height: 80px;
  --nav-height-mobile: 64px;

  /* Shadows */
  --shadow-card: 0 10px 40px rgba(0, 0, 0, 0.12);
  --shadow-card-hover: 0 20px 60px rgba(0, 0, 0, 0.18);
  --shadow-button: 0 4px 15px rgba(232, 163, 23, 0.35);
  --shadow-text: 2px 2px 8px rgba(0, 0, 0, 0.5);

  /* Borders & Radius */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;

  /* Transitions */
  --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}