/* ============================================
   THEME VARIABLES — Source of Truth
   Source: design-dna.json (modern_v8 - Travel Booking)
   Style: Modern Travel Agency & Booking
   ============================================ */

:root {
  /* === Brand Colors (Interior Black/White) === */
  --theme-primary:        #000000;
  --theme-primary-dark:   #0a0a0a;
  --theme-primary-light:  #f3f4f6;
  --theme-primary-mid:    #4b5563;
  --theme-primary-border: #e5e7eb;

  /* === Alpha Variants === */
  --theme-primary-alpha-10: rgba(0, 0, 0, 0.05);
  --theme-primary-alpha-25: rgba(0, 0, 0, 0.1);
  --theme-primary-alpha-50: rgba(0, 0, 0, 0.2);

  /* === Gray Scale === */
  --theme-gray-900: #111827;
  --theme-gray-800: #1F2937;
  --theme-gray-700: #374151;
  --theme-gray-600: #4B5563;
  --theme-gray-500: #6B7280;
  --theme-gray-400: #9CA3AF;
  --theme-gray-300: #D1D5DB;
  --theme-gray-200: #E5E7EB;
  --theme-gray-100: #F3F4F6;
  --theme-gray-50:  #F9FAFB;

  /* === Semantic Variables === */
  --theme-text-primary:   #1F2937;
  --theme-text-secondary: #6B7280;
  --theme-text-muted:     #9CA3AF;
  --theme-text-white:     #FFFFFF;
  --theme-bg-default:     #FFFFFF;
  --theme-bg-subtle:      #F9FAFB;
  --theme-border:         #E5E7EB;
  --theme-border-light:   #F3F4F6;

  /* === Feedback === */
  --theme-success: #10B981;
  --theme-error:   #EF4444;
  --theme-warning: #F59E0B;

  /* === Shapes & Radii === */
  --theme-radius-none: 0px;
  --theme-radius-sm:   8px;
  --theme-radius-md:   12px;
  --theme-radius-lg:   16px;
  --theme-radius-xl:   24px;
  --theme-radius-2xl:  32px;
  --theme-radius-pill: 9999px;

  --theme-radius-card:    24px;
  --theme-radius-btn:     9999px;
  --theme-radius-input:   12px;
  --theme-radius-img:     24px;
  --theme-radius-widget:  24px;
  --theme-radius-hero:    32px;

  /* === Shadows === */
  --theme-shadow-widget: 0 20px 40px -10px rgba(0,0,0,0.08);
  --theme-shadow-card:   0 10px 30px -5px rgba(0,0,0,0.05);
  --theme-shadow-float:  0 12px 24px rgba(0,0,0,0.12);
  --theme-shadow-nav:    0 4px 20px rgba(0,0,0,0.03);

  /* === Spacing === */
  --theme-section-y:   120px;
  --theme-section-y-m: 80px;
}