/* ========================================
   VARIÁVEIS CSS - REVITA ODONTOLOGIA
   Identidade Visual: Tons Escuros Premium
   ======================================== */

:root {
    /* ============ CORES PRIMÁRIAS ============ */
    /* Paleta Premium: Escuro, Dourado, Marfim */
    --color-primary: #1DB5A8;           /* Turquesa (apenas detalhes) */
    --color-gold: #D4AF37;              /* Dourado luxo */
    --color-gold-light: #E8D7B8;        /* Dourado claro/Marfim */
    --color-ivory: #F5F1E8;             /* Marfim elegante */
    
    /* ============ CORES NEUTRAS - TONS ESCUROS ============ */
    --color-white: #FFFFFF;
    --color-black: #000000;
    --color-dark-primary: #0F0F0F;      /* Preto muito escuro */
    --color-dark-secondary: #1A1A1A;    /* Cinza muito escuro */
    --color-dark-tertiary: #2D2D2D;     /* Cinza escuro */
    --color-dark-light: #3F3F3F;        /* Cinza escuro claro */
    
    /* Grays (mantém compatibilidade) */
    --color-gray-50: #F9FAFB;
    --color-gray-100: #F3F4F6;
    --color-gray-200: #E5E7EB;
    --color-gray-300: #D1D5DB;
    --color-gray-400: #9CA3AF;
    --color-gray-500: #6B7280;
    --color-gray-600: #4B5563;
    --color-gray-700: #374151;
    --color-gray-800: #1F2937;
    --color-gray-900: #111827;
    
    /* ============ CORES DE TEXTO ============ */
    --color-text-primary: #0F0F0F;      /* Preto para texto principal */
    --color-text-secondary: #4B4B4B;    /* Cinza escuro para texto secundário */
    --color-text-light: #F5F1E8;        /* Marfim para texto em fundo escuro */
    --color-text-accent: #D4AF37;       /* Dourado para destaques */
    
    /* ============ CORES DE FUNDO ============ */
    --color-bg-white: #FFFFFF;          /* Branco puro */
    --color-bg-ivory: #F5F1E8;          /* Marfim (fundo claro) */
    --color-bg-dark: #0F0F0F;           /* Preto muito escuro */
    --color-bg-dark-alt: #1A1A1A;       /* Cinza muito escuro */
    --color-bg-gray: #2D2D2D;           /* Cinza escuro */
    --color-background-map: #FFF9E6;    /* Fundo mapa (amarelo claro) */
    
    /* ============ TIPOGRAFIA ============ */
    /* Fontes do site principal */
    --font-primary: 'Poppins', sans-serif;              /* Corpo de texto */
    --font-heading: 'Oswald', sans-serif;               /* Títulos (site principal) */
    --font-heading-alt: 'Futura', sans-serif;      /* Títulos alternativos */
    
    /* ============ TAMANHOS DE FONTE ============ */
    --font-size-xs: 0.75rem;      /* 12px */
    --font-size-sm: 0.875rem;     /* 14px */
    --font-size-base: 1rem;       /* 16px */
    --font-size-lg: 1.125rem;     /* 18px */
    --font-size-xl: 1.25rem;      /* 20px */
    --font-size-2xl: 1.5rem;      /* 24px */
    --font-size-3xl: 1.875rem;    /* 30px */
    --font-size-4xl: 3.25rem;     /* 36px */
    --font-size-5xl: 4rem;        /* 48px */
    --font-size-6xl: 5.75rem;     /* 60px */
    
    /* ============ PESOS DE FONTE ============ */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* ============ ESPAÇAMENTOS ============ */
    --spacing-xs: 0.5rem;     /* 8px */
    --spacing-sm: 1rem;       /* 16px */
    --spacing-md: 1.5rem;     /* 24px */
    --spacing-lg: 2rem;       /* 32px */
    --spacing-xl: 3rem;       /* 48px */
    --spacing-2xl: 4rem;      /* 64px */
    --spacing-3xl: 6rem;      /* 96px */
    --spacing-4xl: 8rem;      /* 128px */
    
    /* ============ CONTAINER ============ */
    --container-max-width: 1200px;
    --container-padding: 1.5rem;
    
    /* ============ BORDER RADIUS ============ */
    --radius-sm: 0.375rem;    /* 6px */
    --radius-md: 0.5rem;      /* 8px */
    --radius-lg: 0.75rem;     /* 12px */
    --radius-xl: 1rem;        /* 16px */
    --radius-full: 9999px;
    
    /* ============ SOMBRAS ============ */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-dark: 0 10px 30px rgba(0, 0, 0, 0.3);
    
    /* ============ TRANSIÇÕES ============ */
    --transition-fast: 150ms ease-in-out;
    --transition-base: 300ms ease-in-out;
    --transition-slow: 500ms ease-in-out;
    
    /* ============ BREAKPOINTS ============ */
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    
    /* ============ Z-INDEX ============ */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    
    /* ============ HEADER ============ */
    --color-header-bg: #000000;         /* Preto (site principal) */
    --color-nav-link: #ffffff;          /* Branco */
    --color-nav-link-hover: #1DB5A8;    /* Turquesa ao passar */
}

/* ============ DARK MODE (Futuro) ============ */
@media (prefers-color-scheme: dark) {
    :root {
        --color-text-primary: #e0e0e0;
        --color-background-alt: #2d2d2d;
    }
}