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

:root {
    /* Core Colors */
    --color-primary: #2B74C7;
    /* Azul da marca - usado para destaque, botões, links, bordas */
    --color-primary-dark: #1D559F;
    /* Variação mais escura da cor principal - usado para hover, gradientes */
    --color-accent: #2EC27E;
    /* Cor de destaque/secundária (contrastante/complementar) com a cor principal */
    --color-whatsapp: #00CC00;
    /* Verde do WhatsApp - padrão reconhecível */
    --color-whatsapp-dark: #009900;
    /* Verde mais escuro para hover do WhatsApp */

    /* Background Colors - DARK THEME */
    --color-bg-deep: #1a1a1a;
    /* Cor de fundo principal (corpo da página) - PRETO ESCURO para tema escuro */
    --color-bg-surface: #2d2d2d;
    /* Cor de fundo secundário (stats, SEO, footer) - CINZA ESCURO */
    --color-bg-card: #2d2d2d;
    /* Cor de fundo dos cards (services, differentials) - CINZA ESCURO */
    --color-bg-elevated: #404040;
    /* Cor de fundo elevado (bordas, hover) - CINZA MÉDIO ESCURO */

    /* Text Colors - LIGHT FOR DARK BACKGROUND */
    --color-text-primary: #ffffff;
    /* Cor do texto principal sobre fundo escuro - BRANCO */
    --color-text-secondary: #cccccc;
    /* Cor do texto secundário (parágrafos, labels) - CINZA CLARO */
    --color-text-muted: #999999;
    /* Cor do texto mais suave (footer, créditos) - CINZA MÉDIO */
    --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) - BRANCO em tema escuro */
    --color-text-subtitle: #cccccc;
    /* Cor do texto do subtítulo (hero section) */
    --color-text-form-label: #dddddd;
    /* Cor do texto dos labels dos formulários */

    /* Border & UI Colors */
    --color-border-light: #404040;
    /* Cor de borda clara (inputs, cards) - CINZA ESCURO */
    --color-border-medium: #505050;
    /* Cor de borda média (service buttons) - CINZA MÉDIO CLARO */
    --color-border-heavy: #666666;
    /* 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) */

    /* Social Media Colors (FIXAS) */
    --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 */

    --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 */

    /* Grid Pattern */
    --color-grid-pattern: rgba(255, 255, 255, 0.05);
    /* Cor do padrão de grid no fundo (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 */
    --color-overlay-white-light: rgba(26, 26, 26, 0.9);
    /* Sobreposição escura com 90% de opacidade */
    --color-overlay-white-extra-light: rgba(26, 26, 26, 0.8);
    /* Sobreposição escura com 80% de opacidade */
    --color-overlay-dim: rgba(0, 0, 0, 0.05);
    /* Sobreposição escura com 5% de opacidade */

    /* Primary Color Variants with Alpha (Variações com Transparência) */
    --color-primary-alpha-05: rgba(43, 116, 199, 0.05);
    /* Cor principal com 5% de opacidade */
    --color-primary-alpha-1: rgba(43, 116, 199, 0.1);
    /* Cor principal com 10% de opacidade */
    --color-primary-alpha-3: rgba(43, 116, 199, 0.3);
    /* Cor principal com 30% de opacidade */
    --color-primary-alpha-4: rgba(43, 116, 199, 0.4);
    /* Cor principal com 40% de opacidade */
    --color-primary-alpha-5: rgba(43, 116, 199, 0.5);
    /* Cor principal com 50% de opacidade */
    --color-primary-alpha-7: rgba(43, 116, 199, 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-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 */

    /* 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;
}