/* Apex Transport Group — Design Tokens
   Source: DESIGN.md (lines 30-1580) + alignment plan
   Version: 2.0 | Date: 2026-05-09
*/

:root {
  /* ── Primary Palette ─────────────────────────────── */
  --apex-navy:        #0d1f3c;   /* Hero backgrounds, nav, footer */
  --apex-navy-mid:    #1e3a5f;   /* Section dark alternates, card backs */
  --apex-navy-light:  #2a4a73;   /* Hover states on dark surfaces */

  /* ── Action ──────────────────────────────────────── */
  --apex-orange:      #c2410c;   /* CTAs on dark, icons on light */
  --apex-orange-hot:  #ea580c;   /* Hover on orange elements */
  --apex-orange-glow: rgba(194, 65, 12, 0.25); /* Glow halos on dark */
  --apex-orange-subtle: rgba(194, 65, 12, 0.08); /* Tint on light sections */

  /* ── Neutrals ────────────────────────────────────── */
  --apex-white:       #ffffff;
  --apex-off-white:   #f5f4f0;   /* Warm light canvas — body bg */
  --apex-stone:       #e8e5df;   /* Dividers on light sections */
  --apex-charcoal:    #111827;   /* Body text on light */
  --apex-muted:       #6b7280;   /* Captions, supporting copy */

  /* ── Glass / Surface ─────────────────────────────── */
  --glass-surface:    rgba(255, 255, 255, 0.06);
  --glass-surface-md: rgba(255, 255, 255, 0.10);
  --glass-border:     rgba(255, 255, 255, 0.12);
  --glass-border-hot: rgba(255, 255, 255, 0.24);
  --glass-blur:       14px;

  /* ── Functional ──────────────────────────────────── */
  --apex-success:     #16a34a;
  --apex-warning:     #d97706;
  --apex-error:       #dc2626;

  /* ── Grain / Texture ─────────────────────────────── */
  --grain-opacity:    0.035;

  /* ── Gradients ───────────────────────────────────── */
  --grad-hero:        linear-gradient(165deg, rgba(13, 31, 60, 0.72) 0%, rgba(26, 50, 88, 0.55) 55%, rgba(15, 37, 64, 0.78) 100%);
  --grad-orange-edge: linear-gradient(90deg, var(--apex-orange) 0%, rgba(194, 65, 12, 0.0) 60%);
  --grad-card-dark:   linear-gradient(145deg, rgba(30, 58, 95, 0.9) 0%, rgba(13, 31, 60, 0.95) 100%);
  --grad-image-up:    linear-gradient(to top, rgba(13, 31, 60, 0.95) 0%, rgba(13, 31, 60, 0.4) 45%, transparent 100%);
  --grad-section-transition: linear-gradient(180deg, var(--apex-navy) 0%, var(--apex-off-white) 100%);

  /* ── Type Scale ───────────────────────────────────── */
  --text-xs:   0.75rem;     /* 12px */
  --text-sm:   0.875rem;    /* 14px */
  --text-base: 1rem;        /* 16px */
  --text-lg:   1.125rem;    /* 18px */
  --text-xl:   1.25rem;     /* 20px */
  --text-2xl:  1.5rem;      /* 24px */
  --text-3xl:  1.875rem;    /* 30px */
  --text-4xl:  2.25rem;     /* 36px */
  --text-5xl:  3rem;        /* 48px */
  --text-6xl:  3.75rem;     /* 60px */
  --text-7xl:  4.5rem;      /* 72px */
  --text-8xl:  6rem;        /* 96px — hero stat desktop */
  --text-9xl:  8rem;        /* 128px — oversized ghost text */

  /* ── Spacing (8px base grid) ───────────────────────── */
  --space-1:   0.25rem;    /* 4px  */
  --space-2:   0.5rem;     /* 8px  */
  --space-3:   0.75rem;    /* 12px */
  --space-4:   1rem;       /* 16px */
  --space-5:   1.25rem;    /* 20px */
  --space-6:   1.5rem;     /* 24px */
  --space-8:   2rem;       /* 32px */
  --space-10:  2.5rem;     /* 40px */
  --space-12:  3rem;       /* 48px */
  --space-16:  4rem;       /* 64px */
  --space-20:  5rem;       /* 80px */
  --space-24:  6rem;       /* 96px */
  --space-32:  8rem;       /* 128px */
  --space-40:  10rem;      /* 160px — hero padding */
  --space-48:  12rem;      /* 192px — cinematic breathing room */

  /* ── Section vertical rhythm ──────────────────────── */
  --section-pad-sm:  var(--space-16);
  --section-pad-md:  var(--space-24);
  --section-pad-lg:  var(--space-32);

  /* ── Container ─────────────────────────────────────── */
  --container-max:    1360px;
  --container-wide:   1600px;   /* Full-bleed image containers */
  --container-narrow:  900px;   /* Editorial copy columns */
  --container-pad:    clamp(var(--space-6), 4vw, var(--space-16));

  /* ── Breakpoints ───────────────────────────────────── */
  --bp-sm:   640px;
  --bp-md:   768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
  --bp-2xl: 1536px;

  /* ── Durations ─────────────────────────────────────── */
  --dur-fast:   0.15s;
  --dur-base:   0.25s;
  --dur-slow:   0.45s;
  --dur-reveal: 0.60s;
  --dur-stagger-unit: 90ms;

  /* ── Easings ───────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.0,  0,    0.2, 1);
  --ease-in:     cubic-bezier(0.4,  0,    1,   1);
  --ease-inout:  cubic-bezier(0.4,  0,    0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);  /* Overshoot — CTAs, card lifts */
  --ease-expo:   cubic-bezier(0.19, 1,    0.22, 1);   /* Large reveals */

  /* ── Nav height (set via JS) ───────────────────────── */
  --nav-height: 72px;
}

/* Contrast rules — enforced via usage, not automated */
/*
  Context              CTA color       Text color       Meets
  White/off-white bg   .btn-navy      #ffffff         AA ✓
  Navy/dark bg         .btn-primary   #ffffff         AA ✓
  Orange bg            —              #ffffff         AA ✓
  Orange text on white NEVER as body text — Fails
*/