/* =====================================================================
   LUXORIA TRAVEL DESIGN TOKENS
   Single source of truth for colors, typography, spacing, and shadows.
   ===================================================================== */
:root {
  /* ---------- COLOR: BRAND ---------- */
  --color-navy-deep:   #060B16; /* Midnight Slate (for footers and heavy text blocks) */
  --color-navy:        #0A1128; /* Deep Luxury Navy (for headings, cards, dark overlays) */
  --color-navy-light:  #1C2541; /* Royal Slate Navy */
  --color-navy-soft:   #3A506B; /* Slate Muted Blue-Grey */
  
  --color-gold-deep:   #FF5E00; /* Deep vibrant orange */
  --color-gold:        #FF9B1A; /* Vibrant warm orange-gold */
  --color-gold-light:  #FFC066; /* Light warm champagne gold */
  --color-gold-pale:   #FFF5E6; /* Warm pale orange-gold glow */

  /* ---------- COLOR: SURFACE ---------- */
  --color-bg:           #FCFBF9; /* Luxurious Warm Chalky Ivory White */
  --color-bg-soft:      #F5F2EB; /* Soft Sand Warm Cream */
  --color-bg-soft-alt:  #EBE6DB; /* Deep Warm Clay Cream */
  --color-white:        #FFFFFF;

  /* ---------- COLOR: TEXT ---------- */
  --color-text:         #2B3544; /* Slate Charcoal */
  --color-text-muted:   #4A5568; /* Muted Charcoal */
  --color-text-faint:   #A0AEC0; /* Light Slate */
  --color-text-on-navy: #FAF9F6; /* Soft Off-White */
  --color-text-on-gold: #FFFFFF;

  /* ---------- COLOR: UTILITY ---------- */
  --color-border:        #E2DCD0; /* Delicate warm border line */
  --color-border-strong: #C4BAA9; /* Stronger warm border line */
  --color-success:       #2A7B61; /* Luxury Emerald Green */
  --color-success-bg:    rgba(42, 123, 97, 0.06);
  --color-danger:        #B83C3C; /* Luxury Deep Red */
  --color-danger-bg:     rgba(184, 60, 60, 0.06);
  --color-info:          #3182CE;
  
  /* ---------- GRADIENTS ---------- */
  --gradient-navy-overlay: linear-gradient(180deg, rgba(6, 11, 22, 0.3) 0%, rgba(6, 11, 22, 0.85) 100%);
  --gradient-navy-deep:    linear-gradient(135deg, var(--color-navy-deep) 0%, var(--color-navy) 60%, var(--color-navy-light) 100%);
  --gradient-gold-line:    linear-gradient(90deg, var(--color-gold) 0%, var(--color-gold-deep) 100%);
  --gradient-gold-text:    linear-gradient(135deg, var(--color-gold-deep) 0%, var(--color-gold) 50%, var(--color-gold-light) 100%);
  --gradient-premium-glow: radial-gradient(circle, rgba(255, 155, 26, 0.12) 0%, rgba(6, 11, 22, 0) 70%);
  --gradient-soft-glow:    radial-gradient(circle, rgba(28, 37, 65, 0.03) 0%, rgba(252, 251, 249, 0) 70%);

  /* ---------- TYPOGRAPHY ---------- */
  --font-heading: 'Cormorant Garamond', serif;
  --font-accent: 'Cormorant Garamond', serif;
  --font-body: 'Outfit', sans-serif;
  
  --fs-h1: clamp(2.5rem, 5vw + 1rem, 4.5rem);
  --fs-h2: clamp(2rem, 3.2vw + 1rem, 3.4rem);
  --fs-h3: clamp(1.4rem, 1.6vw + 1rem, 2.2rem);
  --fs-h4: 1.35rem;
  --fs-body-lg: 1.15rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-xs: 0.75rem;
  --fs-eyebrow: 0.85rem;
  
  --lh-heading: 1.15;
  --lh-body: 1.75;

  /* ---------- SPACING SCALE ---------- */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4.5rem;
  --space-2xl: 6.5rem;
  --space-3xl: 9rem;
  --section-padding-y: clamp(4.5rem, 7vw, 6.5rem); /* Immersive spacing */

  /* ---------- RADIUS ---------- */
  --radius-card: 28px; /* Luxury soft rounded cards */
  --radius-card-lg: 36px;
  --radius-btn: 999px; /* Capsule buttons */
  --radius-pill: 999px;
  --radius-sm: 16px;

  /* ---------- SHADOW ---------- */
  --shadow-xs: 0 1px 2px rgba(10, 17, 40, 0.02);
  --shadow-card: 0 4px 30px rgba(164, 150, 120, 0.05), 0 12px 40px rgba(10, 17, 40, 0.03);
  --shadow-card-hover: 0 20px 50px rgba(164, 150, 120, 0.12), 0 1px 4px rgba(10, 17, 40, 0.02);
  --shadow-header: 0 4px 30px rgba(10, 17, 40, 0.02);
  --shadow-btn-gold: 0 12px 25px rgba(197, 155, 39, 0.22);
  --shadow-modal: 0 30px 60px -15px rgba(6, 11, 22, 0.25);

  /* ---------- MOTION ---------- */
  --ease-standard: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 0.2s;
  --duration-base: 0.38s;
  --duration-slow: 0.7s;

  /* ---------- LAYOUT ---------- */
  --header-height: 96px;
  --header-height-scrolled: 76px;
  --container-max: 1320px;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
