/* ==========================================================================
   DESIGN TOKENS — Punjab Aerostrikers
   ========================================================================== */

:root {
  /* Colour system */
  --navy-950: #070F24;
  --navy-900: #0B1A3A;
  --navy-800: #122655;
  --navy-700: #1a3576;
  --royal: #1F4FD1;
  --royal-600: #1a3fa8;
  --gold: #F5C400;
  --gold-600: #D9A900;
  --white: #FFFFFF;
  --ink: #0B1A3A;
  --mist: #F3F5FA;
  --mist-dark: #e7eaf3;
  --line: rgba(255, 255, 255, 0.12);
  --line-dark: rgba(11, 26, 58, 0.12);

  /* Semantic aliases */
  --bg-page: var(--white);
  --bg-navy: var(--navy-950);
  --text-on-navy: var(--white);
  --text-on-light: var(--ink);
  --success: #2AAE64;
  --danger: #E0483C;

  /* Typography */
  --font-display: "Anton", "Bebas Neue", Impact, sans-serif;
  --font-sub: "Oswald", "Arial Narrow", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-script: "Kaushan Script", cursive;

  --h1: clamp(2.6rem, 6vw, 5.5rem);
  --h2: clamp(2rem, 4.2vw, 3.4rem);
  --h3: clamp(1.4rem, 2.4vw, 2rem);
  --h4: clamp(1.1rem, 1.6vw, 1.4rem);
  --body-lg: clamp(1.05rem, 1.4vw, 1.2rem);
  --body: 1rem;
  --small: 0.875rem;
  --eyebrow: 0.8rem;

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

  /* Layout */
  --container-max: 1280px;
  --gutter: 1.5rem;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* Effects */
  --shadow-sm: 0 2px 8px rgba(7, 15, 36, 0.08);
  --shadow-md: 0 8px 24px rgba(7, 15, 36, 0.16);
  --shadow-lg: 0 20px 60px rgba(7, 15, 36, 0.28);
  --shadow-gold: 0 8px 24px rgba(245, 196, 0, 0.35);

  --transition-fast: 160ms ease;
  --transition-base: 260ms cubic-bezier(0.2, 0.7, 0.3, 1);
  --transition-slow: 480ms cubic-bezier(0.2, 0.7, 0.3, 1);

  --header-h: 88px;
  --header-h-scrolled: 68px;
}

@media (max-width: 640px) {
  :root {
    --gutter: 1rem;
  }
}