/* ══════════════════════════════════════════════════════════════
   Stitch V2 — Design Tokens
   TheBookFlight.com Global Design System
   Generated from Google Stitch export analysis
   ══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@500;600;700;800&display=swap');

:root {
  /* ── Primary Palette ── */
  --st-bg:              #0b1220;
  --st-bg-rgb:          11, 18, 32;
  --st-surface:         #111b2e;
  --st-surface-rgb:     17, 27, 46;
  --st-surface-2:       #162038;
  --st-surface-3:       #1a2644;
  --st-surface-hover:   #1e2c50;
  --st-surface-active:  #243460;

  /* ── Borders ── */
  --st-border:          rgba(255,255,255,0.06);
  --st-border-2:        rgba(255,255,255,0.10);
  --st-border-active:   rgba(255,255,255,0.15);
  --st-border-glow:     rgba(208,2,27,0.35);

  /* ── Brand / CTA ── */
  --st-red:             #D0021B;
  --st-red-rgb:         208, 2, 27;
  --st-red-light:       #ff2d4a;
  --st-red-dark:        #a50116;
  --st-red-glow:        rgba(208,2,27,0.35);
  --st-red-soft:        rgba(208,2,27,0.08);
  --st-red-gradient:    linear-gradient(135deg, #D0021B 0%, #ff2d4a 100%);

  /* ── Semantic Colors ── */
  --st-green:           #22c55e;
  --st-green-rgb:       34, 197, 94;
  --st-green-soft:      rgba(34,197,94,0.12);
  --st-amber:           #f59e0b;
  --st-amber-rgb:       245, 158, 11;
  --st-amber-soft:      rgba(245,158,11,0.12);
  --st-blue:            #3b82f6;
  --st-blue-rgb:        59, 130, 246;
  --st-blue-soft:       rgba(59,130,246,0.12);
  --st-purple:          #8b5cf6;
  --st-purple-soft:     rgba(139,92,246,0.12);

  /* ── Text Hierarchy ── */
  --st-text:            #ffffff;
  --st-text-2:          rgba(255,255,255,0.75);
  --st-text-3:          rgba(255,255,255,0.50);
  --st-text-muted:      rgba(255,255,255,0.35);
  --st-text-dim:        rgba(255,255,255,0.20);
  --st-text-ghost:      rgba(255,255,255,0.10);

  /* ── Neumorphic Shadows ── */
  --st-shadow-inset:    inset 3px 3px 6px rgba(0,0,0,0.4),
                        inset -3px -3px 6px rgba(255,255,255,0.02);
  --st-shadow-raised:   6px 6px 16px rgba(0,0,0,0.5),
                       -4px -4px 12px rgba(255,255,255,0.03);
  --st-shadow-card:     0 8px 32px rgba(0,0,0,0.35);
  --st-shadow-float:    0 16px 48px rgba(0,0,0,0.4);
  --st-shadow-glow-red: 0 4px 24px rgba(208,2,27,0.35);
  --st-shadow-glow-sm:  0 2px 12px rgba(208,2,27,0.25);

  /* ── Typography ── */
  --st-font:            'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  --st-font-display:    'Space Grotesk', 'Outfit', sans-serif;

  /* Font Sizes */
  --st-fs-hero:         clamp(32px, 5vw, 52px);
  --st-fs-h1:           clamp(28px, 4vw, 40px);
  --st-fs-h2:           clamp(22px, 3vw, 32px);
  --st-fs-h3:           clamp(18px, 2.5vw, 24px);
  --st-fs-body:         15px;
  --st-fs-sm:           13px;
  --st-fs-xs:           11px;
  --st-fs-micro:        10px;

  /* ── Border Radius ── */
  --st-r-sm:            8px;
  --st-r-md:            14px;
  --st-r-lg:            20px;
  --st-r-xl:            28px;
  --st-r-pill:          50px;
  --st-r-round:         50%;

  /* ── Spacing Scale ── */
  --st-sp-1:            4px;
  --st-sp-2:            8px;
  --st-sp-3:            12px;
  --st-sp-4:            16px;
  --st-sp-5:            20px;
  --st-sp-6:            24px;
  --st-sp-8:            32px;
  --st-sp-10:           40px;
  --st-sp-12:           48px;
  --st-sp-16:           64px;
  --st-sp-20:           80px;
  --st-sp-24:           96px;

  /* ── Transitions ── */
  --st-ease:            cubic-bezier(0.25, 1, 0.5, 1);
  --st-ease-bounce:     cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --st-duration:        0.3s;
  --st-duration-slow:   0.6s;

  /* ── Z-Index Stack ── */
  --st-z-base:          1;
  --st-z-dropdown:      100;
  --st-z-sticky:        200;
  --st-z-fixed:         300;
  --st-z-header:        400;
  --st-z-modal:         500;
  --st-z-toast:         600;
  --st-z-topmost:       999;

  /* ── Layout ── */
  --st-container:       1200px;
  --st-container-sm:    960px;
  --st-container-xs:    720px;
  --st-header-h:        80px;
  --st-topbar-h:        36px;
  --st-bottom-nav-h:    70px;
}

/* ── Dark Mode Force ── */
@media (prefers-color-scheme: light) {
  :root {
    /* Keep dark — Stitch is always dark */
    color-scheme: dark;
  }
}