/* =========================================================
   BRANDNEW LOOK — Design Tokens
   Extracted from logo via KMeans colour analysis
   ========================================================= */

:root {
  /* ── Primary Brand Colours ─────────────────────────── */
  --navy-900:  #021E3F;   /* dominant brand: hero, headers, footer  */
  --blue-700:  #045694;   /* mid blue: secondary backgrounds         */
  --blue-500:  #0777BC;   /* primary interactive: links, buttons     */
  --blue-300:  #63BAF3;   /* sky blue: accents on dark backgrounds   */
  --gold-500:  #F0AA1D;   /* amber-gold: swoosh, badges, gold CTAs  */
  --gold-400:  #F5BE4D;   /* lighter gold for gradients             */

  /* ── Neutrals ──────────────────────────────────────── */
  --grey-500:  #869599;   /* decorative/large-text only — NOT body  */
  --ink-900:   #0A1722;   /* near-black body text on light          */
  --paper-50:  #F7FAFC;   /* off-white page background              */
  --paper-100: #EEF3F8;   /* light section: subtle blue-grey tint   */
  --white:     #FFFFFF;
  --line:      #D9E2EC;   /* hairline borders                        */

  /* ── Semantic Aliases ──────────────────────────────── */
  --color-text-primary:   var(--ink-900);
  --color-text-inverse:   var(--white);
  --color-text-muted:     #4A5568;
  --color-text-on-navy:   var(--white);
  --color-bg-page:        var(--paper-50);
  --color-bg-alt:         var(--paper-100);
  --color-bg-dark:        var(--navy-900);
  --color-border:         var(--line);
  --color-accent:         var(--gold-500);
  --color-primary:        var(--blue-500);
  --color-primary-dark:   var(--blue-700);

  /* ── Gradients ─────────────────────────────────────── */
  --gradient-hero:        linear-gradient(135deg, var(--navy-900) 0%, var(--blue-700) 100%);
  --gradient-gold-line:   linear-gradient(90deg, var(--gold-500) 0%, var(--blue-500) 100%);
  --gradient-blue:        linear-gradient(135deg, var(--blue-700) 0%, var(--blue-500) 100%);
  --gradient-navy-subtle: linear-gradient(180deg, rgba(2,30,63,0.05) 0%, transparent 100%);

  /* ── Typography ─────────────────────────────────────── */
  --font-display: 'Archivo', 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  /* Fluid scale with clamp(min, preferred, max) */
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.8rem);
  --text-sm:   clamp(0.875rem, 0.85rem + 0.25vw, 0.9375rem);
  --text-base: clamp(1rem,     0.975rem + 0.25vw, 1.0625rem);
  --text-lg:   clamp(1.125rem, 1.05rem + 0.5vw,  1.25rem);
  --text-xl:   clamp(1.25rem,  1.1rem  + 0.75vw, 1.5rem);
  --text-2xl:  clamp(1.5rem,   1.25rem + 1.25vw, 2rem);
  --text-3xl:  clamp(1.875rem, 1.4rem  + 2.5vw,  2.75rem);
  --text-4xl:  clamp(2.25rem,  1.6rem  + 3.5vw,  3.75rem);
  --text-5xl:  clamp(2.75rem,  1.8rem  + 5vw,    5rem);
  --text-hero: clamp(3rem,     2rem    + 6vw,     6.5rem);

  /* ── Spacing ────────────────────────────────────────── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Section vertical padding */
  --section-y: clamp(3rem, 6vw, 6rem);
  --section-y-lg: clamp(5rem, 8vw, 9rem);

  /* ── Layout ─────────────────────────────────────────── */
  --container-max: 1440px;
  --container-pad: clamp(1rem, 5vw, 5rem);
  --grid-cols:     12;
  --gutter:        clamp(1rem, 2vw, 1.5rem);

  /* ── Radius ─────────────────────────────────────────── */
  --radius-sm:  0.375rem;
  --radius-md:  0.75rem;
  --radius-lg:  1.25rem;
  --radius-xl:  2rem;
  --radius-full: 9999px;

  /* ── Shadows (navy-tinted, never pure black) ─────────── */
  --shadow-sm:  0 1px 3px rgba(2,30,63,0.08), 0 1px 2px rgba(2,30,63,0.06);
  --shadow-md:  0 4px 12px rgba(2,30,63,0.10), 0 2px 4px rgba(2,30,63,0.06);
  --shadow-lg:  0 8px 28px rgba(2,30,63,0.14), 0 4px 8px rgba(2,30,63,0.08);
  --shadow-xl:  0 16px 48px rgba(2,30,63,0.18), 0 8px 16px rgba(2,30,63,0.10);
  --shadow-gold: 0 4px 20px rgba(240,170,29,0.25);
  --shadow-blue: 0 4px 20px rgba(7,119,188,0.25);

  /* ── Transitions ────────────────────────────────────── */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
  --duration-enter: 600ms;

  /* ── Z-Index Scale ──────────────────────────────────── */
  --z-base:    0;
  --z-raised:  10;
  --z-overlay: 100;
  --z-modal:   200;
  --z-toast:   300;
  --z-nav:     400;

  /* ── Focus ring ─────────────────────────────────────── */
  --focus-ring: 0 0 0 3px rgba(7,119,188,0.35);
}

/* Dark-section overrides (when inside .section--dark or .bg-navy) */
.section--dark,
[data-theme="dark"] {
  --color-text-primary: var(--white);
  --color-text-muted:   rgba(255,255,255,0.7);
  --color-border:       rgba(255,255,255,0.15);
  --color-bg-page:      var(--navy-900);
  --color-bg-alt:       var(--blue-700);
}