/* ==========================================================================
   variables.css - Design tokens
   All colours, spacing, radii, shadows and type live here as custom properties.
   ========================================================================== */

:root {
  /* ---- Brand colours ---- */
  --navy-900: #081F36;   /* Deep navy */
  --navy-800: #0B304D;   /* Dark blue */
  --navy-700: #0e3a5c;
  --orange:   #F36B21;   /* Safety orange */
  --orange-600: #d95c17;
  --orange-soft: #FFF1E8; /* Soft orange wash */
  --offwhite: #F7F8FA;
  --white:    #FFFFFF;
  --success:  #16835D;

  /* ---- Text ---- */
  --text:     #394553;   /* Body text */
  --muted:    #677482;   /* Muted text */
  --border:   #DDE3E8;   /* Hairline border */
  --text-on-dark: #F7F8FA;
  --muted-on-dark: #9fb4c9;
  --border-on-dark: rgba(255, 255, 255, 0.12);

  /* ---- Surfaces ---- */
  --surface: var(--white);
  --surface-alt: var(--offwhite);
  --surface-dark: var(--navy-900);

  /* ---- Typography ---- */
  --font-heading: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Fluid type scale (clamp: min, preferred, max) */
  --fs-eyebrow: clamp(0.72rem, 0.68rem + 0.2vw, 0.8rem);
  --fs-small:   clamp(0.82rem, 0.8rem + 0.15vw, 0.9rem);
  --fs-body:    clamp(0.95rem, 0.92rem + 0.2vw, 1.05rem);
  --fs-lead:    clamp(1.05rem, 1rem + 0.4vw, 1.2rem);
  --fs-h4:      clamp(1.1rem, 1rem + 0.6vw, 1.35rem);
  --fs-h3:      clamp(1.35rem, 1.15rem + 1vw, 1.9rem);
  --fs-h2:      clamp(1.7rem, 1.35rem + 1.7vw, 2.75rem);
  --fs-h1:      clamp(2.1rem, 1.5rem + 3vw, 4rem);
  --fs-display: clamp(3rem, 5vw, 5.5rem);

  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-body: 1.65;

  /* ---- Spacing scale ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  /* Section vertical rhythm (fluid) */
  --section-y: clamp(3.5rem, 2.5rem + 5vw, 7rem);

  /* ---- Layout ---- */
  --container: 1200px;
  --container-wide: 1360px;
  --gutter: clamp(1.1rem, 0.5rem + 3vw, 2.5rem);
  --nav-h: 88px;
  --nav-h-scrolled: 64px;

  /* ---- Radii ---- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ---- Shadows ---- */
  --shadow-xs: 0 1px 2px rgba(8, 36, 60, 0.06);
  --shadow-sm: 0 2px 8px rgba(8, 36, 60, 0.08);
  --shadow-md: 0 10px 30px rgba(8, 36, 60, 0.10);
  --shadow-lg: 0 24px 60px rgba(8, 36, 60, 0.16);
  --shadow-orange: 0 12px 28px rgba(243, 107, 33, 0.28);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.18s;
  --dur: 0.32s;
  --dur-slow: 0.6s;

  /* ---- Z-index ladder ---- */
  --z-nav: 100;
  --z-mobile-menu: 110;
  --z-float: 90;
  --z-lightbox: 200;
  --z-preloader: 300;
}