/* Paleta de Cores - Gabriela Interiores - Design Infantil */
/* Baseado nas diretrizes de uso específicas para cada cor */

:root {
    /* 1. Cor Principal - Rosa vibrante para elementos de destaque */
    --primary-cta: #e62987;             /* Botões de ação, ícones importantes, títulos principais */
    
    /* 2. Cor Secundária - Laranja forte para elementos complementares */
    --secondary-accent: #d16d2a;        /* Sub-títulos, ícones, botões secundários */
    
    /* 3. Cor de Apoio 1 - Amarelo dourado para detalhes */
    --support-gold: #d79330;            /* Bordas, divisores, títulos de seções, pequenos ícones */
    
    /* 4. Cor de Apoio 2 - Bege claro para respiro visual */
    --support-beige: #dab4a9;           /* Fundo de seções amplas, áreas de texto */
    
    /* 5. Cor de Fundo - Rosa claro acolhedor */
    --bg-warm-pink: #ffe6f3;            /* Fundo principal, áreas maiores */
    
    /* 6. Cor Neutra 1 - Pêssego claro suave */
    --neutral-peach: #ffdeca;           /* Fundos de conteúdo, botões suaves */
    
    /* 7. Cor Neutra 2 - Amarelo pálido para equilíbrio */
    --neutral-yellow: #ffeacd;          /* Divisores, espaços vazios, detalhes gráficos */
    
    /* 8. Cor Neutra 3 - Creme suave para base neutra */
    --neutral-cream: #ffece6;           /* Seções menores, caixas de texto, depoimentos */
    
    /* Cores base para tipografia e contraste */
    --text-dark: #333333;               /* Texto principal */
    --text-medium: #666666;             /* Texto secundário */
    --text-light: #999999;              /* Texto auxiliar */
    --white: #ffffff;                   /* Branco puro */
    --black: #000000;                   /* Preto puro */
    
    /* Mapeamento para compatibilidade com código existente */
    --primary-pink: var(--primary-cta);
    --primary-orange: var(--secondary-accent);
    --primary-yellow: var(--support-gold);
    --primary-beige: var(--support-beige);
    --primary-mint: var(--support-beige);
    --accent-coral: var(--primary-cta);
    --accent-gold: var(--support-gold);
    --accent-mint: var(--support-beige);
    --light-pink: var(--bg-warm-pink);
    --light-orange: var(--neutral-peach);
    --light-yellow: var(--neutral-yellow);
    --light-beige: var(--neutral-cream);
    --light-mint: var(--neutral-cream);
    --warm-white: var(--white);
    --charcoal: var(--text-dark);
    --gray-dark: var(--text-dark);
    --gray-medium: var(--text-medium);
    --gray-light: var(--text-light);
}

/* Classes utilitárias para cores infantis */
.color-pink { color: var(--primary-pink); }
.color-orange { color: var(--primary-orange); }
.color-yellow { color: var(--primary-yellow); }
.color-beige { color: var(--primary-beige); }
.color-mint { color: var(--primary-mint); }
.color-coral { color: var(--accent-coral); }
.color-gold { color: var(--accent-gold); }

/* Classes de fundo */
.bg-light-pink { background-color: var(--light-pink); }
.bg-light-orange { background-color: var(--light-orange); }
.bg-light-yellow { background-color: var(--light-yellow); }
.bg-light-beige { background-color: var(--light-beige); }
.bg-light-mint { background-color: var(--light-mint); }

.bg-sage { background-color: var(--primary-sage); }
.bg-peach { background-color: var(--primary-peach); }
.bg-lavender { background-color: var(--primary-lavender); }
.bg-coral { background-color: var(--accent-coral); }
.bg-mint { background-color: var(--accent-mint); }
.bg-buttercup { background-color: var(--accent-buttercup); }

.bg-light-sage { background-color: var(--light-sage); }
.bg-light-peach { background-color: var(--light-peach); }
.bg-light-lavender { background-color: var(--light-lavender); }
.bg-light-cream { background-color: var(--light-cream); }
.bg-light-blue { background-color: var(--light-blue); }