/* ============================================
   CSS VARIABLES - Single Source of Truth
   ============================================ */

:root {
    /* Core Colors */
    --color-primary: #004d9c; /* Azul da marca - usado para destaque, botões, links, bordas */
    --color-primary-dark: #003a75; /* Variação mais escura da cor principal (≈25% mais escura) - usado para hover, gradientes */
    --color-accent: #ffb400; /* Cor de destaque/secundária - complementar ao azul principal */

    /* Fixed Brand Colors */
    --color-whatsapp: #00CC00; /* Verde do WhatsApp - padrão reconhecível */
    --color-whatsapp-dark: #009900; /* Verde mais escuro para hover do WhatsApp */
    --color-facebook: #1877F2; /* Cor oficial do Facebook */
    --color-instagram: #bc1888; /* Cor base do Instagram */
    --color-instagram-gradient: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); /* Gradiente oficial do Instagram */

    /* Background Colors - DARK THEME */
    --color-bg-deep: #0045BF; /* Cor de fundo principal (corpo da página) - azul marca */
    --color-bg-surface: #0045BF; /* Cor de fundo secundário (stats, SEO, footer) - azul marca */
    --color-bg-card: #2d2d2d; /* Cor de fundo dos cards (services, differentials) - cinza escuro para tema escuro */
    --color-bg-elevated: #2c2c2c; /* Cor de fundo elevado (bordas, hover) - cinza escuro */

    /* Text Colors - LIGHT FOR DARK BACKGROUND */
    --color-text-primary: #ffffff; /* Cor do texto principal sobre fundo escuro - branco */
    --color-text-secondary: #dddddd; /* Cor do texto secundário (parágrafos, labels) - cinza claro */
    --color-text-muted: #bbbbbb; /* Cor do texto mais suave (footer, créditos) - cinza mais claro */
    --color-text-on-dark: #ffffff; /* Texto branco para fundos escuros */
    --color-text-on-light: #0a0a0a; /* Texto escuro para fundos claros */
    --color-text-dark: #ffffff; /* Cor do texto escuro (header, navigation) - tema escuro: branco */
    --color-text-subtitle: #cccccc; /* Cor do texto do subtítulo (hero section) - tema escuro: claro */
    --color-text-form-label: #dddddd; /* Cor do texto dos labels dos formulários - tema escuro: claro */

    /* Form Colors (acompanha o tema) */
    --color-form-bg: rgba(30, 30, 30, 0.8); /* Fundo do formulário - tema escuro: semi-transparente escuro */
    --color-form-label: #dddddd; /* Texto dos labels do formulário - tema escuro: claro */
    --color-form-text: #ffffff; /* Texto dos inputs do formulário - tema escuro: claro */
    --color-form-btn-text: #cccccc; /* Texto dos botões de serviço no formulário - tema escuro: claro */
    --color-form-cta-text: #ffffff; /* Texto do "Receba Atendimento Rápido" - tema escuro: claro */

    /* CTA Section Colors (acompanha o tema) */
    --color-cta-title: #ffffff; /* Texto do título da seção contato - tema escuro: claro */
    --color-cta-text: #dddddd; /* Texto do parágrafo da seção contato - tema escuro: claro */

    /* Header Scrolled Colors (acompanha o tema) */
    --color-header-bg: rgba(18, 18, 18, 0.95); /* Fundo do header quando scrolled - tema escuro: escuro semi-transparente */
    --color-header-text: #ffffff; /* Texto dos links do header scrolled - tema escuro: claro */
    --color-header-contact-text: #ffffff; /* Texto do botão Contato no header - sempre claro (tem fundo de cor) */

    /* Card Section Colors (acompanha o tema) */
    --color-card-bg: #2d2d2d; /* Fundo dos cards (differentials, services) - tema escuro: cinza escuro */
    --color-card-text: #ffffff; /* Texto dos cards - tema escuro: claro */

    /* Border & UI Colors */
    --color-border-light: #ced4da; /* Cor de borda clara (inputs, cards) - cinza claro */
    --color-border-medium: #dee2e6; /* Cor de borda média (service buttons) - cinza médio claro */
    --color-border-heavy: #adb5bd; /* Cor de borda forte (hover states) - cinza médio-claro */

    /* Shadow & Alpha Colors */
    --color-shadow-alpha: rgba(0, 0, 0, 0.5); /* Cor da sombra forte (50% de opacidade) */
    --color-shadow-light: rgba(0, 0, 0, 0.1); /* Cor da sombra leve (10% de opacidade) */
    --color-shadow-medium: rgba(0, 0, 0, 0.15); /* Cor da sombra média (15% de opacidade) */
    --color-shadow-strong: rgba(0, 0, 0, 0.3); /* Cor da sombra forte (30% de opacidade) */

    /* Primary Color Variants with Alpha (Variações com Transparência) */
    --color-primary-alpha-05: rgba(0, 77, 156, 0.05); /* Cor principal com 5% de opacidade */
    --color-primary-alpha-1: rgba(0, 77, 156, 0.1); /* Cor principal com 10% de opacidade */
    --color-primary-alpha-3: rgba(0, 77, 156, 0.3); /* Cor principal com 30% de opacidade */
    --color-primary-alpha-4: rgba(0, 77, 156, 0.4); /* Cor principal com 40% de opacidade */
    --color-primary-alpha-5: rgba(0, 77, 156, 0.5); /* Cor principal com 50% de opacidade */
    --color-primary-alpha-7: rgba(0, 77, 156, 0.7); /* Cor principal com 70% de opacidade */

    /* WhatsApp Color Variants */
    --color-whatsapp-alpha: rgba(0, 204, 0, 0.4); /* Cor do WhatsApp com 40% de opacidade */
    --color-whatsapp-alpha-3: rgba(0, 204, 0, 0.3); /* Cor do WhatsApp com 30% de opacidade */

    /* Call Button Color Variants */
    --color-call: #2563eb; /* Cor azul para botão de ligar */
    --color-call-hover: #1d4ed8; /* Cor azul mais escura para hover do botão de ligar */
    --color-call-alpha: rgba(37, 99, 235, 0.4); /* Cor do botão de ligar com 40% de opacidade */
    --color-call-hover-alpha: rgba(29, 78, 216, 0.4); /* Cor do hover do botão de ligar com 40% de opacidade */

    /* Grid Pattern */
    --color-grid-pattern: rgba(255, 255, 255, 0.05); /* Cor do padrão de grid no fundo - tema escuro: branco com 5% de opacidade */

    /* Overlay & Background Colors (Cores de Sobreposição) */
    --color-overlay-white: rgba(26, 26, 26, 0.95); /* Sobreposição escura com 95% de opacidade - tema escuro */
    --color-overlay-white-light: rgba(26, 26, 26, 0.9); /* Sobreposição escura com 90% de opacidade - tema escuro */
    --color-overlay-white-extra-light: rgba(26, 26, 26, 0.8); /* Sobreposição escura com 80% de opacidade - tema escuro */
    --color-overlay-dim: rgba(0, 0, 0, 0.3); /* Sobreposição escura com 30% de opacidade - tema escuro */

    /* Typography */
    --font-heading: 'Bebas Neue', sans-serif;
    --font-body: 'Outfit', sans-serif;
    --font-number: 'Oswald', sans-serif;

    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 4rem;
    --spacing-xl: 6rem;

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-xl: 24px;
}