/* ============================================
   CSS VARIABLES (DESIGN TOKENS)
   Variáveis do Design System
   ============================================ */

:root {
    /* ========== CORES ========== */
    
   /* Cores Primárias (Vinho Premium) */
    --color-navy-dark: #2e0408;    /* Vinho quase preto para contrastes máximos */
    --color-navy-medium: #46060c;  /* Seu vinho principal */
    --color-navy-light: #630d16;   /* Vinho vibrante para destaques */
    --color-gold: #D4A84A;
    --color-gold-hover: #BF9841;
    
    /* Cores Secundárias (Harmonizadas) */
    --color-royal-blue: #46060c;   /* Substituído azul por vinho */
    --color-blue-accent: #D4A84A;  /* Acentos agora são dourados */
    
    /* Cores de Fundo */
    --color-bg-cream: #FCF9F6;
    --color-bg-white: #FFFFFF;
    --color-bg-navy: #1a0204;      /* Fundo escuro vinho */
    --color-bg-overlay: rgba(26, 2, 4, 0.85);
    
    /* Cores de Texto */
    --color-text-primary: #1a1a1a;
    --color-text-secondary: #4a4a4a;
    --color-text-light: #FFFFFF;
    --color-text-muted: #888888;
    
    /* Cores de Suporte */
    --color-success: #28a745;
    --color-error: #dc3545;
    --color-warning: #ffc107;
    --color-info: #17a2b8;
    
    /* ========== TIPOGRAFIA ========== */
    
    /* Fontes */
    --font-heading: 'Cantata One', serif;
    --font-body: 'DM Sans', Arial, sans-serif;
    
    /* Tamanhos de Fonte */
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-base: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-2xl: 24px;
    --font-size-3xl: 28px;
    --font-size-4xl: 32px;
    --font-size-5xl: 36px;
    --font-size-6xl: 42px;
    --font-size-7xl: 44px;
    
    /* Pesos de Fonte */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
    
    /* Alturas de Linha */
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.7;
    
    /* ========== ESPAÇAMENTOS ========== */
    
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    --spacing-3xl: 64px;
    --spacing-4xl: 80px;
    --spacing-5xl: 120px;
    
    /* ========== LAYOUT ========== */
    
    /* Container Widths */
    --container-max-width: 1200px;
    --container-wide: 1400px;
    --container-narrow: 900px;
    
    /* Gap */
    --gap-sm: 16px;
    --gap-md: 24px;
    --gap-lg: 30px;
    --gap-xl: 40px;
    
    /* Section Padding */
    --section-padding-desktop: 120px;
    --section-padding-tablet: 80px;
    --section-padding-mobile: 60px;
    
    /* ========== BORDER RADIUS ========== */
    
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 50%;
    
    /* ========== SHADOWS ========== */
    
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 12px rgba(46, 6, 12, 0.1);
    --shadow-lg: 0 8px 24px rgba(46, 6, 12, 0.15);
    --shadow-xl: 0 16px 48px rgba(26, 2, 4, 0.2);
    --shadow-gold: 0 4px 14px rgba(212, 168, 74, 0.3);
    
    /* ========== Z-INDEX ========== */
    
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 500;
    --z-modal-backdrop: 900;
    --z-modal: 1000;
    --z-popover: 1100;
    --z-tooltip: 1200;
    
    /* ========== TRANSITIONS ========== */
    
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
    --transition-bounce: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* ========== BREAKPOINTS ========== */
    
    --breakpoint-xs: 480px;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-xxl: 1400px;
}