/*
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * DESIGN TOKENS — tokens.css
 * Single source of truth for all visual values.
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 *
 * COLOURS
 *   Brand      → --color-primary, --color-secondary, --color-accent
 *   Neutrals   → --color-grey-100 to --color-grey-900
 *   Semantic   → --color-text-*, --color-bg-*, --color-border-*
 *   States     → --color-success, --color-error, --color-warning
 *
 * TYPOGRAPHY
 *   Families   → --font-primary, --font-secondary, --font-mono
 *   Sizes      → --text-xs through --text-7xl
 *   Weights    → --weight-light through --weight-extrabold
 *   Leading    → --leading-tight, --leading-normal, --leading-relaxed
 *
 * SPACING
 *   Scale      → --space-1 through --space-25
 *
 * EFFECTS
 *   Radius     → --radius-sm through --radius-full
 *   Shadows    → --shadow-sm through --shadow-3xl
 *   Z-index    → --z-base through --z-navbar
 *   Transition → --transition-fast, --transition-base, --transition-slow
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 */

:root {
  /* Brand colours */
  --color-primary: #0055FF;
  --color-primary-dark: #0044EE;
  --color-primary-light: #00AAFF;
  --color-secondary: #003366;
  --color-accent: linear-gradient(-72.8deg, #00255d 0.57%, #006bd5 14.31%, #000d57 95.49%);
  --color-accent-blue-dark: #000d57;
  --color-accent-navy-dark: #001a33;

  /* Neutral / Greyscale */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-grey-100: #F8FAFC;
  --color-grey-200: #F9FAFB;
  --color-grey-300: #F3F4F6;
  --color-grey-400: #f2f2f2;
  --color-grey-500: #E5E7EB;
  --color-grey-600: #E2E8F0;
  --color-grey-700: #e0e0e0;
  --color-grey-800: #9CA3AF;
  --color-grey-900: #0d0d0d;

  /* Semantic colours */
  --color-text-primary: #0d0d0d;
  --color-text-secondary: #757575;
  --color-text-heading: #0d0d0d;
  --color-text-link: #0d0d0d;
  --color-text-link-hover: #0055FF;
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #f2f2f2;
  --color-bg-container: #f2f2f2;
  --color-bg-card: #F9FAFB;
  --color-border: #E5E7EB;
  --color-border-focus: #aaa;
  --color-success: #4ade80;
  --color-error: #D32F2F;
  --color-warning: #D32F2F;

  /* Additional explicit colors found in code */
  --color-slate: #4B5563;
  --color-black-card: #111827;
  --color-bg-footer: #030712;
  --color-text-footer-muted: #A3A3A3;
  --color-text-footer-links: #f2f2f2;
  --color-text-gray-dark: #272727;
  --color-text-muted-dark: #666666;
  --color-faq-icon: #00357A;

  /* Typography families */
  --font-primary: 'Inter', sans-serif;
  --font-secondary: 'Sora', sans-serif;
  --font-mono: 'Outfit', sans-serif;

  /* Typography sizes */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-tab: 15px;
  --text-base: 16px;
  --text-md: 18px;
  --text-lg: 20px;
  --text-xl: 24px;
  --text-2xl: 28px;
  --text-3xl: 32px;
  --text-4xl: 36px;
  --text-5xl: 48px;
  --text-6xl: 54px;
  --text-7xl: 64px;

  /* Typography weights */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* Line heights */
  --leading-tight: 1.1;
  --leading-normal: 1.2;
  --leading-relaxed: 1.6;
  --leading-extra-relaxed: 1.7;

  /* Spacing Scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 10px;
  --space-4: 12px;
  --space-5: 15px;
  --space-6: 16px;
  --space-7: 20px;
  --space-8: 24px;
  --space-9: 30px;
  --space-10: 32px;
  --space-11: 36px;
  --space-12: 40px;
  --space-13: 48px;
  --space-14: 50px;
  --space-15: 60px;
  --space-16: 64px;
  --space-17: 72px;
  --space-18: 80px;
  --space-19: 84px;
  --space-20: 96px;
  --space-21: 100px;
  --space-22: 120px;
  --space-23: 160px;
  --space-24: 220px;
  --space-25: 240px;

  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-3xl: 24px;
  --radius-4xl: 32px;
  --radius-5xl: 40px;
  --radius-6xl: 50px;
  --radius-7xl: 54px;
  --radius-8xl: 60px;
  --radius-9xl: 100px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0.5px 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-lg: 1px 2px 4px 0px rgba(0, 0, 0, 0.25);
  --shadow-xl: 0 4px 12px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 10px 30px rgba(0, 0, 0, 0.04);
  --shadow-3xl: 0 20px 40px rgba(0, 0, 0, 0.3);

  /* Z-index scale */
  --z-base: 0;
  --z-overlay: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-navbar: 1000;

  /* Transitions */
  --transition-fast: all 0.2s ease;
  --transition-base: all 0.3s ease;
  --transition-slow: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}