/* ============================================================================
   Extendly Partner Program — FLIGHT (2026 rebuild)
   Design tokens. Single source of truth. Every module reads from here.
   Brand substrate: Extendly design system (navy gradient + yellow CTA + Mulish).
   ============================================================================ */

:root {
  /* ---------- BRAND NAVY ---------- */
  --navy-950: #030812;
  --navy-900: #050d24;
  --navy-850: #071634;
  --navy-800: #0a1a3a;
  --navy-700: #0f2553;
  --navy-600: #16336d;

  /* ---------- ACCENTS (role + brand) ---------- */
  --blue:   #4a8af4;  --blue-rgb:   74,138,244;  --blue-soft:  #7baaf7;
  --green:  #5dd888;  --green-rgb:  93,216,136;  --green-soft: #86e3a5;
  --yellow: #f5c518;  --yellow-rgb: 245,197,24;  --yellow-soft:#ffd84d;
  --red:    #ff4a3a;  --red-rgb:    255,74,58;   --red-soft:   #ff7a6e;

  /* logo palette (bar chart + paper airplane) */
  --logo-green:  #34c759;
  --logo-blue:   #2f6fe8;
  --logo-yellow: #f4b91b;
  --logo-red:    #ff4a3a;

  /* ---------- ROLE MAP (journey) ---------- */
  --role-customer: var(--green);  --role-customer-rgb: var(--green-rgb);
  --role-agency:   var(--yellow); --role-agency-rgb:   var(--yellow-rgb);
  --role-extendly: var(--blue);   --role-extendly-rgb: var(--blue-rgb);

  /* ---------- TEXT ON DARK ---------- */
  --fg-1: #ffffff;
  --fg-2: rgba(255,255,255,0.80);
  --fg-3: rgba(255,255,255,0.58);
  --fg-4: rgba(255,255,255,0.38);

  /* ---------- MATERIALS / GLASS ---------- */
  --glass-bg:        rgba(255,255,255,0.045);
  --glass-bg-strong: rgba(255,255,255,0.075);
  --glass-border:    rgba(255,255,255,0.10);
  --glass-border-hi: rgba(255,255,255,0.18);
  --glass-blur: 18px;
  --panel-grad: linear-gradient(165deg, rgba(16,37,83,0.55), rgba(5,13,36,0.65));

  /* ---------- TYPE ---------- */
  --font-sans: "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  /* fluid scale (min .. max, tracks viewport) */
  --fs-hero:    clamp(3rem, 1.2rem + 9vw, 10rem);      /* 48 .. 160 */
  --fs-display: clamp(2.4rem, 1.2rem + 5.2vw, 5.5rem); /* 38 .. 88  */
  --fs-h1:      clamp(2rem, 1.3rem + 3vw, 3.4rem);
  --fs-h2:      clamp(1.5rem, 1.1rem + 1.6vw, 2.2rem);
  --fs-h3:      clamp(1.2rem, 1rem + 0.9vw, 1.55rem);
  --fs-lead:    clamp(1.05rem, 0.95rem + 0.6vw, 1.4rem);
  --fs-body:    clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
  --fs-small:   0.9rem;
  --fs-eyebrow: 0.78rem;
  --lh-tight: 1.02;
  --lh-snug:  1.15;
  --lh-body:  1.55;
  --tracking-eyebrow: 0.18em;

  /* ---------- SPACE ---------- */
  --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; --space-11: 176px;
  --gutter: clamp(20px, 4vw, 56px);
  --maxw: 1600px;

  /* ---------- RADII ---------- */
  --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-2xl: 40px; --r-pill: 999px;

  /* ---------- ELEVATION ---------- */
  --shadow-1: 0 2px 8px rgba(0,0,0,0.25);
  --shadow-2: 0 12px 40px rgba(0,0,0,0.40);
  --shadow-3: 0 30px 80px rgba(0,0,0,0.55);
  --shadow-glow-blue:   0 0 40px rgba(var(--blue-rgb),0.45);
  --shadow-glow-yellow: 0 0 40px rgba(var(--yellow-rgb),0.40);

  /* ---------- MOTION ---------- */
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-back:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 160ms; --dur-2: 320ms; --dur-3: 560ms; --dur-4: 900ms;

  /* ---------- Z LAYERS ---------- */
  --z-aurora: 0;
  --z-grain: 1;
  --z-content: 2;
  --z-nav: 40;
  --z-overlay: 60;
}

/* Animatable custom properties (for scroll-driven + gsap tweens) */
@property --flight-progress { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --spot-x { syntax: "<length>"; inherits: false; initial-value: 50%; }
@property --spot-y { syntax: "<length>"; inherits: false; initial-value: 50%; }

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 1ms; --dur-2: 1ms; --dur-3: 1ms; --dur-4: 1ms; }
}