/**
 * REALIZATUR Viagens e Turismo — Design System Tokens
 * Master CSS Custom Properties (Colors, Typography, Spacing, Shadows, Radii, Z-Index)
 */

:root {
  /* ==========================================================================
     1. COLOR PALETTE
     ========================================================================== */

  /* Brand - Deep Navy Palette */
  --color-navy-950: #03152F; /* Deepest canvas, hero background, dark sections */
  --color-navy-900: #06234A; /* Trust bar, secondary dark surfaces, card dark */
  --color-navy-800: #0A3566; /* Hover states, dark accents, active items */
  --color-blue-600: #0D5E9C; /* Auxiliary links, informational icons */
  --color-blue-500: #1B75BC; /* Secondary accents, focus rings */
  --color-blue-100: #E6F0FA; /* Light blue tint, badge background */

  /* Brand - Noble Gold Palette */
  --color-gold-700: #B87916; /* Dark gold for WCAG AA text contrast on light bg (4.6:1) */
  --color-gold-600: #D99B27; /* Primary brand gold, CTA buttons, highlighted icons */
  --color-gold-500: #EDB842; /* Luminous gold highlights, active borders, badges */
  --color-gold-400: #F1C65E; /* Hover state for primary buttons */
  --color-gold-300: #F5D276; /* Soft shimmer, gradient midpoint */
  --color-gold-100: #FDF6E2; /* Subtle gold surface wash */

  /* Neutral Surfaces */
  --color-sand-100: #FFF6E2; /* Warm secondary section background */
  --color-ice-100:  #F2F7FC; /* Cool crisp background for light pages & cards */
  --color-white:    #FFFFFF; /* Pure white card surface & text on dark */
  --color-surface-card: #FFFFFF;
  --color-surface-dark: #03152F;
  --color-surface-muted: #F8FAFC;

  /* Typography & Slate Scale */
  --color-slate-950: #0B1120;
  --color-slate-900: #172033; /* Primary body text on light bg (14.2:1 contrast) */
  --color-slate-700: #334155; /* Secondary headers & bold text */
  --color-slate-600: #586378; /* Secondary copy, subtitles (5.2:1 contrast) */
  --color-slate-400: #94A3B8; /* Placeholders, disabled states */
  --color-slate-300: #CBD3DF; /* Dividers & soft borders */
  --color-slate-200: #E2E8F0; /* Card borders */
  --color-slate-100: #F1F5F9;

  /* Functional & Status Colors */
  --color-success: #1F8A5B;
  --color-success-bg: #E8F7F0;
  --color-warning: #C47A08;
  --color-warning-bg: #FEF3C7;
  --color-danger:  #C83E4D;
  --color-danger-bg:  #FEE2E2;
  --color-info:    #2477C9;
  --color-info-bg:    #E0F2FE;
  --color-whatsapp:#25D366;
  --color-whatsapp-dark: #128C7E;

  /* Gradients */
  --gradient-navy: linear-gradient(135deg, #03152F 0%, #0A3566 100%);
  --gradient-navy-dark: linear-gradient(180deg, #03152F 0%, #06234A 100%);
  --gradient-gold: linear-gradient(135deg, #B87916 0%, #F5D276 52%, #D99B27 100%);
  --gradient-gold-button: linear-gradient(135deg, #D99B27 0%, #EDB842 100%);
  --gradient-gold-hover: linear-gradient(135deg, #EDB842 0%, #F5D276 100%);
  --gradient-gold-accent: linear-gradient(90deg, #D99B27 0%, #EDB842 50%, #D99B27 100%);
  
  --gradient-hero-overlay: linear-gradient(
    90deg,
    rgba(3, 21, 47, 0.95) 0%,
    rgba(3, 21, 47, 0.82) 40%,
    rgba(3, 21, 47, 0.45) 75%,
    rgba(3, 21, 47, 0.25) 100%
  );
  --gradient-hero-overlay-mobile: linear-gradient(
    180deg,
    rgba(3, 21, 47, 0.95) 0%,
    rgba(3, 21, 47, 0.85) 60%,
    rgba(3, 21, 47, 0.98) 100%
  );
  --gradient-card-overlay: linear-gradient(
    180deg,
    rgba(3, 21, 47, 0) 30%,
    rgba(3, 21, 47, 0.65) 65%,
    rgba(3, 21, 47, 0.95) 100%
  );
  --gradient-banner-overlay: linear-gradient(
    135deg,
    rgba(3, 21, 47, 0.92) 0%,
    rgba(6, 35, 74, 0.85) 100%
  );

  /* ==========================================================================
     2. TYPOGRAPHY
     ========================================================================== */

  --font-heading: 'Geist', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Geist', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-editorial: 'Geist', 'Plus Jakarta Sans', Georgia, serif;

  /* Fluid Typography Scale */
  --font-size-display-xl: clamp(2.5rem, 5vw, 4.5rem);
  --line-height-display-xl: 1.05;
  --font-size-h1: clamp(2.0rem, 3.5vw, 3.25rem);
  --line-height-h1: 1.15;
  --font-size-h2: clamp(1.6rem, 2.8vw, 2.35rem);
  --line-height-h2: 1.25;
  --font-size-h3: clamp(1.2rem, 2vw, 1.65rem);
  --line-height-h3: 1.35;
  --font-size-h4: 1.15rem;
  --line-height-h4: 1.4;
  --font-size-body-lg: 1.125rem;
  --line-height-body-lg: 1.65;
  --font-size-body-md: 1.0rem;
  --line-height-body-md: 1.6;
  --font-size-body-sm: 0.875rem;
  --line-height-body-sm: 1.5;
  --font-size-label: 0.75rem;
  --line-height-label: 1.3;

  /* Font Weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* ==========================================================================
     3. SPACING & LAYOUT
     ========================================================================== */

  --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-30: 120px;

  --container-max-width: 1280px;
  --container-narrow-width: 960px;
  --container-padding: 24px;
  --grid-gutter: 24px;

  /* ==========================================================================
     4. RADII & BORDERS
     ========================================================================== */

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  --border-width: 1px;
  --border-subtle: 1px solid var(--color-slate-200);
  --border-dark: 1px solid rgba(255, 255, 255, 0.12);
  --border-gold: 1px solid var(--color-gold-500);

  /* ==========================================================================
     5. SHADOWS & ELEVATION
     ========================================================================== */

  --shadow-xs: 0 1px 3px rgba(3, 21, 47, 0.05);
  --shadow-sm: 0 4px 12px rgba(3, 21, 47, 0.06);
  --shadow-md: 0 12px 32px rgba(3, 21, 47, 0.10);
  --shadow-lg: 0 20px 50px rgba(3, 21, 47, 0.16);
  --shadow-xl: 0 25px 65px rgba(3, 21, 47, 0.22);
  --shadow-gold: 0 8px 24px rgba(217, 155, 39, 0.28);
  --shadow-gold-hover: 0 12px 32px rgba(217, 155, 39, 0.42);
  --shadow-inner: inset 0 2px 4px rgba(3, 21, 47, 0.06);

  /* ==========================================================================
     6. TRANSITIONS & ANIMATION
     ========================================================================== */

  --transition-fast: 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --transition-base: 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --transition-slow: 400ms cubic-bezier(0.2, 0.8, 0.2, 1);

  /* ==========================================================================
     7. Z-INDEX SYSTEM
     ========================================================================== */

  --z-base: 1;
  --z-card: 10;
  --z-dropdown: 50;
  --z-sticky-header: 100;
  --z-drawer-backdrop: 200;
  --z-drawer: 210;
  --z-modal-backdrop: 300;
  --z-modal: 310;
  --z-toast: 800;
  --z-whatsapp: 900;
  --z-cookie-banner: 950;
}