/* ==========================================================================
   FleetAxyl Design Tokens
   Signature concept: "The Thread" — a single continuous route line that
   carries a pulse of light through every section, the same way one system
   carries information through every department of a fleet. It appears in
   the hero as a live ops feed connector, and again in the "how it connects"
   section as the literal department flow diagram.
   ========================================================================== */

:root{
  /* ---- Color: surfaces ---- */
  --bg-void:        #0A0D0A;   /* page background, near-black w/ slight green cast */
  --bg-surface-1:   #12160F;   /* raised panel */
  --bg-surface-2:   #191F17;   /* elevated panel / card */
  --bg-surface-3:   #212820;   /* highest elevation, active/hover */
  --border-subtle:  #232A20;
  --border-medium:  #313A2C;

  /* ---- Color: brand green ramp ---- */
  --green-900:  #163015;
  --green-700:  #1F5C24;
  --green-600:  #2E7D32;
  --green-500:  #4CA83F;
  --green-400:  #6FCB52;   /* primary brand green */
  --green-300:  #9BE577;
  --green-200:  #C7F5AE;

  /* ---- Color: text ---- */
  --text-primary:    #EEF2EB;
  --text-secondary:  #96A090;
  --text-tertiary:   #616B5C;
  --text-on-green:   #06140A;

  /* ---- Color: status ---- */
  --status-critical: #E5484D;
  --status-critical-bg: rgba(229,72,77,0.12);
  --status-warning:  #E8A83C;
  --status-warning-bg: rgba(232,168,60,0.12);
  --status-info:     #4A90D9;
  --status-info-bg:  rgba(74,144,217,0.12);
  --status-success:  var(--green-400);
  --status-success-bg: rgba(111,203,82,0.12);

  /* ---- Typography ---- */
  --font-display: 'Archivo', 'Arial Narrow', sans-serif;
  --font-body:    'Public Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'IBM Plex Mono', 'Courier New', monospace;

  --fs-eyebrow:   0.75rem;
  --fs-body-sm:   0.875rem;
  --fs-body:      1rem;
  --fs-body-lg:   1.125rem;
  --fs-h4:        1.375rem;
  --fs-h3:        1.875rem;
  --fs-h2:        2.75rem;
  --fs-h1:        clamp(2.5rem, 5vw, 4.5rem);

  --lh-tight: 1.08;
  --lh-snug:  1.3;
  --lh-body:  1.6;

  --tracking-eyebrow: 0.14em;
  --tracking-tight: -0.02em;

  /* ---- Layout ---- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  --max-width: 1280px;
  --section-pad-y: 128px;
  --section-pad-y-mobile: 56px;

  /* ---- Elevation ---- */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.35);
  --shadow-md: 0 8px 28px rgba(0,0,0,0.45);
  --shadow-glow-green: 0 0 0 1px rgba(111,203,82,0.25), 0 8px 32px rgba(76,168,63,0.18);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-med: 360ms;
  --dur-slow: 720ms;
}

@media (max-width: 860px){
  :root{
    --section-pad-y: var(--section-pad-y-mobile);
    --fs-h2: 2rem;
    --fs-h3: 1.5rem;
  }
}