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

:root {
    /* Core Colors */
    --color-primary: #87CEEB;
    /* Cor principal da marca - azul celeste */
    --color-primary-dark: #5BAFD4;
    /* Versão mais escura da cor principal - azul celeste mais escuro para hover, gradientes */
    --color-accent: #c2185b;
    /* Cor de destaque/secundária - contraste complementário 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 - LIGHT THEME */
    --color-bg-deep: #ffffff; /* Cor de fundo principal - tema claro */
    /* Cor de fundo principal (corpo da página) - BRANCO para tema claro */
    --color-bg-surface: #f8f9fa; /* Cor de fundo secundário - tema claro */
    /* Cor de fundo secundário (stats, SEO, footer) - cinza muito claro */
    --color-bg-card: #ffffff; /* Cor de fundo dos cards - tema claro */
    /* Cor de fundo dos cards (services, differentials) - BRANCO */
    --color-bg-elevated: #e9ecef; /* Cor de fundo elevado - tema claro */
    /* Cor de fundo elevado (bordas, hover) - cinza claro */

    /* Text Colors - DARK FOR LIGHT BACKGROUND */
    --color-text-primary: #0a0a0a; /* Texto principal - tema claro */
    /* Cor do texto principal sobre fundo claro - PRETO quase puro */
    --color-text-secondary: #495057; /* Texto secundário - tema claro */
    /* Cor do texto secundário (parágrafos, labels) - cinza médio */
    --color-text-muted: #6c757d; /* Texto suave - tema claro */
    /* Cor do texto mais suave (footer, créditos) - cinza claro */
    --color-text-on-dark: #0a1f3f;
    /* Texto azul marinho escuro para fundos claros */
    --color-text-on-light: #0a0a0a;
    /* Texto escuro para fundos claros */

    --color-text-dark: #1a1a1a; /* Texto header/nav - tema claro */
    /* Cor do texto escuro (header, navigation) - cinza escuro em tema claro */
    --color-text-subtitle: #666666; /* Subtítulo - tema claro */
    /* Cor do texto do subtítulo (hero section) */
    --color-text-form-label: #333333; /* Labels formulário - tema claro */
    /* Cor do texto dos labels dos formulários */

    /* Form Colors (acompanha o tema) */
    --color-form-bg: rgba(70, 160, 200, 0.45); /* Fundo formulário - azul celeste mais escuro */
    /* Fundo do formulário - tema claro: branco, tema escuro: semi-transparente escuro */
    --color-form-label: #333333; /* Labels formulário - tema claro */
    /* Texto dos labels do formulário - tema claro: escuro, tema escuro: claro */
    --color-form-text: #0a0a0a; /* Inputs formulário - tema claro */
    /* Texto dos inputs do formulário - tema claro: escuro, tema escuro: claro */
    --color-form-btn-text: #495057; /* Botões serviço - tema claro */
    /* Texto dos botões de serviço no formulário */
    --color-form-cta-text: #1a1a1a; /* CTA formulário - tema claro */
    /* Texto do "Receba Atendimento Rápido" */

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

    /* Header Scrolled Colors (acompanha o tema) */
    --color-header-bg: rgba(255, 255, 255, 0.95); /* Header scrolled - tema claro */
    /* Fundo do header quando scrolled - tema claro: branco, tema escuro: escuro semi-transparente */
    --color-header-text: #1a1a1a; /* Links header scrolled - tema claro */
    /* Texto dos links do header scrolled - tema claro: escuro, 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: #ffffff; /* Fundo cards - tema claro */
    /* Fundo dos cards (differentials, services) - tema claro: branco, tema escuro: cinza escuro */
    --color-card-text: #1a1a1a; /* Texto cards - tema claro */
    /* Texto dos cards - tema claro: escuro, 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) */

    /* 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(0, 0, 0, 0.05); /* Grid - tema claro */
    /* Cor do padrão de grid no fundo (5% de opacidade) */

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

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