/* ============================================================
  DREAM TRAVEL — DESIGN TOKENS
  Single source of truth for all visual decisions

  Lionel Dev - lioneldev09@gmail.com
   ============================================================ */

:root {
  /* ── Color Palette ── */
  --ink-900: #0A0F1E;
  --ink-800: #111827;
  --ink-700: #1F2937;
  --ink-600: #374151;
  --ink-400: #6B7280;
  --ink-300: #9CA3AF;
  --ink-200: #E5E7EB;
  --ink-100: #F3F4F6;
  --ink-50:  #FAFAFA;

  --blue-950: #020C1B;
  --blue-900: #0A1628;
  --blue-800: #0F2244;
  --blue-700: #1A3A6E;
  --blue-600: #1D4ED8;
  --blue-500: #2563EB;
  --blue-400: #3B82F6;
  --blue-300: #60A5FA;
  --blue-200: #BFDBFE;
  --blue-100: #DBEAFE;
  --blue-50:  #EFF6FF;

  --gold-500: #D97706;
  --gold-400: #F59E0B;
  --gold-300: #FCD34D;

  --green-500: #059669;
  --green-400: #10B981;

  --red-500:   #DC2626;

  /* ── Semantic Tokens ── */
  --color-bg:          #FAFAFA;
  --color-bg-subtle:   #F5F7FF;
  --color-surface:     #FFFFFF;
  --color-surface-2:   #F0F4FF;
  --color-border:      rgba(30, 64, 175, 0.10);
  --color-border-strong: rgba(30, 64, 175, 0.20);

  --color-text-primary:   #0A0F1E;
  --color-text-secondary: #374151;
  --color-text-muted:     #6B7280;
  --color-text-placeholder: #9CA3AF;

  --color-brand:        #1D4ED8;
  --color-brand-dark:   #1A3A6E;
  --color-brand-light:  #EFF6FF;
  --color-accent:       #D97706;
  --color-accent-light: #FEF3C7;

  /* ── Shadows ── */
  --shadow-xs:  0 1px 2px rgba(0,0,0,.05);
  --shadow-sm:  0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:  0 4px 6px rgba(0,0,0,.06), 0 2px 4px rgba(0,0,0,.04);
  --shadow-lg:  0 10px 30px rgba(15,34,68,.10), 0 4px 8px rgba(0,0,0,.04);
  --shadow-xl:  0 20px 50px rgba(15,34,68,.12), 0 8px 16px rgba(0,0,0,.06);
  --shadow-2xl: 0 40px 80px rgba(15,34,68,.15);
  --shadow-blue: 0 8px 30px rgba(29,78,216,.25);
  --shadow-blue-lg: 0 16px 50px rgba(29,78,216,.30);

  /* ── Typography ── */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* Fluid font scale */
  --text-xs:   clamp(0.70rem, 1.5vw, 0.75rem);
  --text-sm:   clamp(0.82rem, 1.8vw, 0.875rem);
  --text-base: clamp(0.93rem, 2vw, 1rem);
  --text-lg:   clamp(1.05rem, 2.2vw, 1.125rem);
  --text-xl:   clamp(1.15rem, 2.5vw, 1.25rem);
  --text-2xl:  clamp(1.3rem, 3vw, 1.5rem);
  --text-3xl:  clamp(1.55rem, 4vw, 1.875rem);
  --text-4xl:  clamp(1.9rem, 5vw, 2.5rem);
  --text-5xl:  clamp(2.3rem, 6vw, 3.25rem);
  --text-6xl:  clamp(2.8rem, 8vw, 4.5rem);

  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;
  --leading-loose:  1.9;

  --tracking-tight:  -0.03em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.08em;
  --tracking-widest:  0.16em;

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

  /* ── Radius ── */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-full: 9999px;

  /* ── Transitions ── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    150ms;
  --dur-base:    250ms;
  --dur-slow:    400ms;
  --dur-xslow:   700ms;

  /* ── Layout ── */
  --max-width: 1280px;
  --nav-height: 72px;
  --banner-height: 44px;
}

/* ── Dark theme ── */
[data-theme="dark"] {
  --color-bg:          #060D1A;
  --color-bg-subtle:   #080F1D;
  --color-surface:     #0D1829;
  --color-surface-2:   #111F36;
  --color-border:      rgba(96, 165, 250, 0.10);
  --color-border-strong: rgba(96, 165, 250, 0.18);

  --color-text-primary:   #F0F6FF;
  --color-text-secondary: #A8C4E8;
  --color-text-muted:     #5B7FA8;
  --color-text-placeholder: #3A5878;

  --color-brand-light:  rgba(29,78,216,.15);
  --color-accent-light: rgba(217,119,6,.12);

  --shadow-lg:  0 10px 30px rgba(0,0,0,.35), 0 4px 8px rgba(0,0,0,.2);
  --shadow-xl:  0 20px 50px rgba(0,0,0,.4), 0 8px 16px rgba(0,0,0,.2);
  --shadow-blue: 0 8px 30px rgba(29,78,216,.35);
}