/* ============================================================
   DESIGN TOKENS — Premium Design System
   (Modern Colors, Typography, Layout, Effects)
============================================================== */

:root {

   /* ------------------------------
       BRAND COLORS
    -------------------------------- */
   --primary-dark: #0B144B;
   --primary-gold: #F4B23A;
   --primary-white: #FFFFFF;
   --text-grey: #C9CEDB;
   --text-dark: #1A1A1A;
   --text-medium: #333333;
   --text-light: #666666;

   /* Section Backgrounds */
   --section-light: #F5F6FA;
   --section-white: #FFFFFF;
   --section-dark: #0B144B;


   /* ------------------------------
       TYPOGRAPHY (Enhanced)
    -------------------------------- */
   --font-primary: 'Outfit', 'Poppins', sans-serif;
   --font-secondary: 'Inter', sans-serif;
   --font-accent: 'Space Grotesk', sans-serif;

   /* Font sizing scale (Improved hierarchy) */
   --fs-hero: 56px;
   --fs-xxl: 48px;
   --fs-xl: 40px;
   --fs-lg: 32px;
   --fs-md: 20px;
   --fs-base: 18px;
   --fs-sm: 16px;
   --fs-xs: 14px;

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


   /* ------------------------------
       SPACING SYSTEM (Enhanced)
    -------------------------------- */
   --space-3xl: 120px;
   --space-xxl: 90px;
   --space-xl: 70px;
   --space-lg: 60px;
   --space-md: 40px;
   --space-sm: 25px;
   --space-xs: 15px;
   --space-xxs: 10px;


   /* ------------------------------
       BORDER RADII (Modern)
    -------------------------------- */
   --radius-xs: 4px;
   --radius-sm: 8px;
   --radius-md: 12px;
   --radius-lg: 16px;
   --radius-xl: 20px;
   --radius-2xl: 24px;
   --radius-full: 9999px;


   /* ------------------------------
       SHADOWS (Premium Depth)
    -------------------------------- */
   --shadow-xs: 0 2px 8px rgba(0, 0, 0, 0.04);
   --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.08);
   --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.12);
   --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.16);
   --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.20);
   --shadow-2xl: 0 24px 64px rgba(0, 0, 0, 0.24);



   /* ------------------------------
       TRANSITIONS & ANIMATIONS
    -------------------------------- */
   --transition-fast: 0.2s ease;
   --transition-base: 0.3s ease;
   --transition-slow: 0.5s ease;
   --transition-smooth: cubic-bezier(0.4, 0, 0.2, 1);


   /* ------------------------------
       GLASSMORPHISM
    -------------------------------- */
   --glass-bg: rgba(255, 255, 255, 0.1);
   --glass-border: rgba(255, 255, 255, 0.2);
   --glass-blur: blur(12px);


   /* ------------------------------
       BREAKPOINTS
    -------------------------------- */
   --bp-desktop: 1200px;
   --bp-tablet: 992px;
   --bp-mobile: 600px;
}