/* ══════════════════════════════════════════════════════════════
   TheBookFlight — Unified Design Tokens v1.0
   Homepage / Mobile Search Token System
   
   This file compiles the approved design tokens from
   agents/design-system/DESIGN_TOKENS.md into usable CSS.
   
   Token prefix: --tbf-*
   Scope: Homepage + Mobile Search (safe to load globally)
   
   NOTE: Legacy tokens (--st-*, --mn-*, --sr-*, --pd-*) are
   NOT removed yet. This file adds the canonical --tbf-* system.
   Other pages will be migrated in later tasks.
   ══════════════════════════════════════════════════════════════ */

:root {
  /* ── Background Layers ── */
  --tbf-bg-deepest:    #050B18;
  --tbf-bg-deep:       #071426;
  --tbf-bg-base:       #0B1020;
  --tbf-bg-card:       #101B2F;
  --tbf-bg-card-raise: #111D33;
  --tbf-bg-inset:      #0A1426;
  --tbf-bg-glass:      rgba(16, 27, 47, 0.85);

  /* ── Brand Accents ── */
  --tbf-blue:          #2F80ED;
  --tbf-blue-rgb:      47, 128, 237;
  --tbf-blue-glow:     rgba(47, 128, 237, 0.35);
  --tbf-blue-soft:     rgba(47, 128, 237, 0.10);
  --tbf-cyan:          #35C8FF;
  --tbf-cyan-rgb:      53, 200, 255;
  --tbf-cyan-glow:     rgba(53, 200, 255, 0.25);
  --tbf-gold:          #F5C766;
  --tbf-gold-rgb:      245, 199, 102;
  --tbf-gold-soft:     rgba(245, 199, 102, 0.12);
  --tbf-red:           #D0021B;
  --tbf-red-rgb:       208, 2, 27;

  /* ── Semantic Colors ── */
  --tbf-whatsapp:      #25D366;
  --tbf-success:       #41D37E;
  --tbf-error:         #FF6B6B;
  --tbf-warning:       #F5C766;

  /* ── Text Hierarchy ── */
  --tbf-text:          #FFFFFF;
  --tbf-text-body:     #DDE8F8;
  --tbf-text-secondary:#B8C7E0;
  --tbf-text-muted:    #7F8EA8;
  --tbf-text-dim:      rgba(255, 255, 255, 0.20);
  --tbf-text-ghost:    rgba(255, 255, 255, 0.08);

  /* ── Borders ── */
  --tbf-border:        rgba(255, 255, 255, 0.06);
  --tbf-border-2:      rgba(255, 255, 255, 0.10);
  --tbf-border-active: rgba(255, 255, 255, 0.18);
  --tbf-border-glow:   rgba(47, 128, 237, 0.30);

  /* ── Neumorphic Shadows ── */
  --tbf-shadow-raised: 6px 6px 16px rgba(0, 0, 0, 0.5),
                       -4px -4px 12px rgba(255, 255, 255, 0.02);
  --tbf-shadow-inset:  inset 3px 3px 6px rgba(0, 0, 0, 0.4),
                       inset -3px -3px 6px rgba(255, 255, 255, 0.02);
  --tbf-shadow-card:   0 8px 32px rgba(0, 0, 0, 0.35);
  --tbf-shadow-float:  0 16px 48px rgba(0, 0, 0, 0.45);
  --tbf-shadow-glow:   0 4px 24px rgba(47, 128, 237, 0.30);
  --tbf-shadow-glass:  0 8px 32px rgba(0, 0, 0, 0.4);

  /* ── Glassmorphism ── */
  --tbf-blur:          blur(12px);

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

  --tbf-fs-hero:       clamp(28px, 5vw, 48px);
  --tbf-fs-h1:         clamp(24px, 4vw, 36px);
  --tbf-fs-h2:         clamp(20px, 3vw, 28px);
  --tbf-fs-h3:         clamp(16px, 2.5vw, 22px);
  --tbf-fs-body:       15px;
  --tbf-fs-sm:         13px;
  --tbf-fs-xs:         11px;
  --tbf-fs-micro:      10px;

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

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

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

  /* ── Z-Index Stack ── */
  --tbf-z-base:        1;
  --tbf-z-sticky:      200;
  --tbf-z-header:      400;
  --tbf-z-modal:       500;
  --tbf-z-toast:       600;
  --tbf-z-topmost:     999;

  /* ── Layout ── */
  --tbf-header-h:      56px;
  --tbf-bottom-nav-h:  70px;
  --tbf-container:     1200px;

  /* ══════════════════════════════════════════
     BACKWARD COMPATIBILITY ALIASES
     Maps old --mn-* tokens to new --tbf-* tokens
     so existing mobile-homepage.css still works.
     ══════════════════════════════════════════ */
  --mn-bg-deepest:     var(--tbf-bg-deepest);
  --mn-bg-deep:        var(--tbf-bg-deep);
  --mn-bg-base:        var(--tbf-bg-base);
  --mn-bg-card:        var(--tbf-bg-card);
  --mn-bg-card-raise:  var(--tbf-bg-card-raise);
  --mn-bg-inset:       var(--tbf-bg-inset);
  --mn-blue:           var(--tbf-blue);
  --mn-cyan:           var(--tbf-cyan);
  --mn-gold:           var(--tbf-gold);
  --mn-green:          var(--tbf-whatsapp);
  --mn-text:           var(--tbf-text);
  --mn-text-body:      var(--tbf-text-body);
  --mn-text-2:         var(--tbf-text-secondary);
  --mn-text-muted:     var(--tbf-text-muted);
}