/* ============================================================
   Design Tokens — colors · radii · shadows · gradients · motion · typography scale · breakpoints
============================================================ */

/* ============================================================
   VARIABLES — MyAviaBiletebi.ge Open Sky Design System
============================================================ */
    :root {
      /* === SKY (deep blue scale - premium refined) === */
      --color-sky-950: #030B1A;
      --color-sky-900: #081225;
      --color-sky-800: #0F1A2E;
      --color-sky-700: #1E3A6E;
      --color-sky-600: #1D4ED8;
      --color-sky-500: #2563EB;
      --color-sky-400: #3B82F6;
      --color-sky-300: #60A5FA;
      --color-sky-200: #93C5FD;
      --color-sky-100: #DBEAFE;
      --color-sky-50: #F0F5FF;

      /* === CYAN (breath / accent - vibrant premium) === */
      --color-cyan-700: #0E7490;
      --color-cyan-600: #0891B2;
      --color-cyan-500: #06B6D4;
      --color-cyan-400: #22D3EE;
      --color-cyan-300: #67E8F9;
      --color-cyan-100: #CFFAFE;
      --color-cyan-50: #ECFEFF;

      /* === PREMIUM ACCENT COLORS === */
      --color-gold-500: #D4A574;
      --color-gold-400: #E8C4A0;
      --color-teal-500: #0D9488;
      --color-violet-500: #A855F7;
      --color-fuchsia-500: #D946EF;

      /* === LEGACY ALIASES (back-compat with existing classes) === */
      --navy: var(--color-sky-800);
      --blue-deep: var(--color-sky-700);
      --blue: var(--color-sky-500);
      --blue-mid: var(--color-sky-400);
      --blue-light: var(--color-sky-300);
      --blue-pale: var(--color-sky-50);
      --blue-pale2: var(--color-sky-100);
      --cyan: var(--color-cyan-600);

      /* === ACCENTS === */
      --amber: #F59E0B;
      --amber-dark: #D97706;
      --emerald: #059669;
      --rose: #E11D48;
      --white: #FFFFFF;
      --gold: var(--color-gold-500);
      --teal: var(--color-teal-500);

      /* === NEUTRAL SCALE (premium refined) === */
      --gray-50: #FAFBFC;
      --gray-100: #F3F4F6;
      --gray-150: #E8EFF8;
      --gray-200: #E2E8F0;
      --gray-300: #CBD5E1;
      --gray-400: #94A3B8;
      --gray-500: #64748B;
      --gray-600: #475569;
      --gray-700: #334155;
      --gray-800: #1E293B;
      --gray-900: #0F172A;

      /* === RADII (premium refined curves) === */
      --r-xs: 6px;
      --r-sm: 10px;
      --r: 14px;
      --r-lg: 20px;
      --r-xl: 28px;
      --r-2xl: 40px;
      --r-3xl: 48px;
      --r-full: 9999px;

      /* === SHADOWS (premium layered depth) === */
      --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.03);
      --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.04);
      --shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 12px 24px rgba(0, 0, 0, 0.05);
      --shadow-md: 0 8px 16px rgba(15, 26, 46, 0.10);
      --shadow-lg: 0 16px 32px rgba(15, 26, 46, 0.12), 0 24px 48px rgba(0, 0, 0, 0.08);
      --shadow-xl: 0 32px 64px rgba(15, 26, 46, 0.16), 0 40px 80px rgba(0, 0, 0, 0.10);
      --shadow-2xl: 0 48px 96px rgba(15, 26, 46, 0.20);
      
      /* === BRAND GLOW SHADOWS === */
      --shadow-blue: 0 8px 32px rgba(37, 99, 235, 0.32), 0 16px 48px rgba(37, 99, 235, 0.20);
      --shadow-blue-sm: 0 4px 16px rgba(37, 99, 235, 0.24);
      --shadow-blue-lg: 0 20px 56px rgba(37, 99, 235, 0.40);
      --shadow-cyan: 0 8px 32px rgba(8, 145, 178, 0.30), 0 12px 40px rgba(8, 145, 178, 0.18);
      --shadow-gold: 0 8px 28px rgba(212, 165, 116, 0.40);
      --shadow-violet: 0 8px 32px rgba(168, 85, 247, 0.28);
      --shadow-inset-white: inset 0 1px 0 rgba(255, 255, 255, 0.20);

      /* === GRADIENTS (premium sophisticated) === */
      --grad-hero: linear-gradient(135deg, #030B1A 0%, #0A1F50 25%, #1740A0 60%, #1E6BD8 100%);
      --grad-hero-alt: linear-gradient(120deg, #040D1F 0%, #1E3A6E 40%, #2563EB 80%, #06B6D4 100%);
      --grad-sky-day: linear-gradient(160deg, #F0F5FF 0%, #DBEAFE 40%, #CFFAFE 80%, #F0FDFF 100%);
      --grad-card-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.08) 100%);
      --grad-card-glass-premium: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.05) 100%);
      --grad-blue-shine: linear-gradient(135deg, #2563EB 0%, #0891B2 50%, #06B6D4 100%);
      --grad-gold-shine: linear-gradient(135deg, #D4A574 0%, #E8C4A0 100%);
      --grad-violet-shine: linear-gradient(135deg, #A855F7 0%, #D946EF 100%);
      --grad-section-fade: linear-gradient(180deg, #FAFBFC 0%, #F0F5FF 50%, #FAFBFC 100%);
      --grad-overlay-dark: linear-gradient(180deg, rgba(3, 11, 26, 0) 0%, rgba(3, 11, 26, 0.95) 100%);
      --grad-overlay-light: linear-gradient(180deg, rgba(240, 245, 255, 0) 0%, rgba(240, 245, 255, 0.85) 100%);

      /* === MOTION (premium refined) === */
      --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
      --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
      --ease-out: cubic-bezier(0, 0, 0.2, 1);
      --ease-in-out: cubic-bezier(0.4, 0, 0.6, 1);
      --ease-elastic: cubic-bezier(0.175, 0.885, 0.32, 1.275);
      --dur-xs: 100ms;
      --dur-fast: 150ms;
      --dur-base: 280ms;
      --dur-slow: 500ms;
      --dur-slower: 700ms;
      --t: var(--dur-base) var(--ease-smooth);
      --t-fast: var(--dur-fast) var(--ease-out);
      --t-slow: var(--dur-slow) var(--ease-smooth);
      --t-spring: var(--dur-base) var(--ease-spring);

      /* === TYPOGRAPHY SCALE (premium refined hierarchy) === */
      --fs-h1: 42px;
      --fs-h2: 32px;
      --fs-h3: 24px;
      --fs-h4: 18px;
      --fs-h5: 16px;
      --fs-body: 15px;
      --fs-sm: 13px;
      --fs-xs: 11px;

      /* === TYPOGRAPHY CLAMP PARAMETERS (fluid responsive) === */
      /* H1: mobile 28px → desktop 42px */
      --fs-h1-min: 28px;
      --fs-h1-fluid: 4.2vw;
      --fs-h1-max: 42px;
      --lh-h1: 1.08;

      /* H2: mobile 22px → desktop 32px */
      --fs-h2-min: 22px;
      --fs-h2-fluid: 3vw;
      --fs-h2-max: 32px;
      --lh-h2: 1.18;

      /* H3: mobile 18px → desktop 24px */
      --fs-h3-min: 18px;
      --fs-h3-fluid: 2.2vw;
      --fs-h3-max: 24px;
      --lh-h3: 1.25;

      /* H4: mobile 16px → desktop 18px */
      --fs-h4-min: 16px;
      --fs-h4-fluid: 1.8vw;
      --fs-h4-max: 18px;

      /* H5 & body typography */
      --lh-body: 1.7;
      --lh-heading: 1.15;

      /* === RESPONSIVE BREAKPOINTS === */
      --bp-xs: 480px;
      --bp-sm: 640px;
      --bp-md: 768px;
      --bp-lg: 1024px;
      --bp-xl: 1280px;
      --bp-2xl: 1536px;

      /* === TOUCH TARGETS (mobile premium) === */
      --tap-min: 44px;
      --tap-lg: 48px;
      --tap-xl: 56px;

      /* === SPACING SCALE (premium refined) === */
      --sp-xs: 4px;
      --sp-sm: 8px;
      --sp: 12px;
      --sp-md: 16px;
      --sp-lg: 24px;
      --sp-xl: 32px;
      --sp-2xl: 48px;
      --sp-3xl: 64px;

      /* === SECTION RHYTHM (premium spacious) === */
      --sec-py: 80px;
      --sec-py-lg: 100px;
      --sec-px: 0px;

      /* === BACKDROP EFFECTS (premium glass) === */
      --backdrop-blur: blur(12px);
      --backdrop-blur-lg: blur(16px);
      --backdrop-opacity: 0.8;
    }

/* ============================================================
   ACCESSIBILITY
============================================================ */
    :focus-visible {
      outline: 2px solid var(--color-sky-400);
      outline-offset: 3px;
      border-radius: 4px;
    }