/* ================================================================
   SISTEMA DE TEMAS — MODELO BASE
   ================================================================
   Como funciona:
   - Este arquivo define o TEMA PADRÃO (Bege Aconchegante).
   - Para criar um novo tema, copie o bloco ":root { ... }"
     e altere APENAS os 4 tokens primitivos:
       --p-h, --p-s, --s-h, --s-s
   - Injete o bloco novo via Jinja no <style id="dynamic-theme-colors">
     do index.html. Ele sobrescreve este arquivo por vir depois.
   - NÃO altere as fórmulas --brand-* e --accent-* — elas derivam
     automaticamente e preservam todos os tons de letra e hierarquia.

   TOKENS PRIMITIVOS:
   --p-h   → Hue da cor principal (0–360)
   --p-s   → Saturação da cor principal (ex: 25%)
             Use valores baixos (10–25%) para paletas neutras/quentes.
             Use valores médios (20–40%) para paletas coloridas mas suaves.
             Evite acima de 45% — os textos ficam saturados demais.
   --s-h   → Hue da cor de destaque/acento
   --s-s   → Saturação da cor de destaque

   REGRA DE OURO:
   A saturação --p-s controla TUDO: backgrounds, bordas E textos.
   Por isso ela deve ser baixa o suficiente para que os textos
   permaneçam elegantes. O contraste e a hierarquia são garantidos
   pelos valores de lightness fixos nas fórmulas (não mude eles).
   ================================================================ */


:root {

    /* ── TEMA PADRÃO: BEGE ACONCHEGANTE ─────────────────────────
       Sensação: Calor humano, acolhimento, sofisticação discreta.
       Referência: areia fina, linho cru, cerâmica artesanal.
    ──────────────────────────────────────────────────────────── */

    /* 1. COR PRINCIPAL */
    --p-h: 35;      /* Laranja-bege quente */
    --p-s: 25%;     /* Saturação baixa = neutro sofisticado */

    /* 2. COR DE DESTAQUE */
    --s-h: 20;      /* Tom levemente mais avermelhado */
    --s-s: 30%;     /* Um pouco mais saturado que o principal */


    /* ── FÓRMULAS — NÃO ALTERAR ─────────────────────────────────
       Estas escalas derivam dos tokens acima.
       Os valores de lightness são calibrados para manter a
       hierarquia tipográfica e o contraste em qualquer tema.
    ──────────────────────────────────────────────────────────── */

    /* Escala principal — usada em backgrounds, bordas, botões, textos */
    --brand-50:  hsl(var(--p-h), var(--p-s), 98%);   /* fundo página */
    --brand-100: hsl(var(--p-h), var(--p-s), 94%);   /* fundo sutil, chips */
    --brand-200: hsl(var(--p-h), var(--p-s), 86%);   /* bordas suaves */
    --brand-300: hsl(var(--p-h), var(--p-s), 74%);   /* bordas médias, dot eyebrow */
    --brand-400: hsl(var(--p-h), var(--p-s), 62%);
    --brand-500: hsl(var(--p-h), var(--p-s), 50%);   /* meio-tom */
    --brand-600: hsl(var(--p-h), var(--p-s), 39%);   /* cor de ação: botões, links, ícones */
    --brand-700: hsl(var(--p-h), var(--p-s), 30%);   /* hover de botões, textos fortes */
    --brand-800: hsl(var(--p-h), var(--p-s), 20%);   /* textos muito escuros */
    --brand-900: hsl(var(--p-h), var(--p-s), 13%);   /* loader background */

    /* Escala de destaque — usada em gradientes e detalhes de acento */
    --accent-50:  hsl(var(--s-h), var(--s-s), 98%);
    --accent-100: hsl(var(--s-h), var(--s-s), 96%);
    --accent-200: hsl(var(--s-h), var(--s-s), 90%);
    --accent-300: hsl(var(--s-h), var(--s-s), 80%);
    --accent-500: hsl(var(--s-h), var(--s-s), 62%);
    --accent-600: hsl(var(--s-h), var(--s-s), 50%);

}


/* ================================================================
   MAPA DE USO — para referência ao pedir temas para IA
   ================================================================

   LOADER (fundo escuro ao carregar a página):
   → background: var(--brand-900)           [muito escuro]
   → nome da psicóloga: hsl(p-h, 15%, 88%) [quase branco tintado]
   → linha decorativa: var(--brand-300)
   → subtítulo: var(--brand-300)
   → borboletas: var(--brand-300)

   HEADER (barra de navegação):
   → fundo: brand-50 com 90% opacidade
   → borda inferior: hsl(p-h, 15%, 90%)
   → logo nome: var(--brand-700)
   → logo cargo: hsl(p-h, 10%, 52%)
   → links nav: hsl(p-h, 8%, 40%)
   → underline link hover: var(--brand-600)

   HERO (seção inicial):
   → fundo: var(--brand-50)
   → orbe 1: hsla(p-h, 30%, 75%, 0.45)
   → orbe 2: hsla(s-h, 30%, 78%, 0.35)
   → badge topo: brand-100 bg + brand-200 borda + brand-700 texto
   → título principal: hsl(p-h, 8%, 12%)   [quase preto tintado]
   → subtítulo: hsl(p-h, 6%, 44%)           [cinza médio tintado]
   → strong no subtítulo: hsl(p-h, 8%, 24%)
   → destaque itálico no título: var(--brand-600)
   → trust chips: brand-200 borda + hsl(p-h, 8%, 35%) texto
   → ícones nos chips: var(--brand-600)
   → label "PSICÓLOGA CLÍNICA": var(--brand-600)
   → órbita foto: hsla(p-h, 25%, 65%, 0.45)
   → badge flutuante texto: hsl(p-h, 8%, 22%)

   BOTÕES:
   → primário (fundo): var(--brand-600)
   → primário hover: var(--brand-700)
   → primário sombra: hsla(p-h, p-s, 39%, 0.28)
   → ghost borda: hsl(p-h, 10%, 82%)
   → ghost hover bg: var(--brand-100)

   SOBRE:
   → fundo seção: gradiente brand-50 → #fff → accent-50
   → heading: hsl(p-h, 8%, 14%)
   → destaque no heading: var(--brand-600)
   → texto corpo: hsl(p-h, 6%, 40%)
   → citação: hsl(p-h, 10%, 30%)
   → tag: brand-100 bg + brand-700 texto
   → stat label: var(--brand-700)
   → stat sub: hsl(p-h, 6%, 52%)

   SERVIÇOS:
   → fundo seção: #fff
   → card fundo: var(--brand-50)
   → card borda: var(--brand-100)
   → card hover gradient: brand-700 → accent-600
   → ícone: brand-100 bg + brand-600 cor
   → título card: hsl(p-h, 8%, 16%)
   → descrição card: hsl(p-h, 6%, 46%)
   → banner CTA: brand-800 → brand-700 → s-h dark
   → btn banner texto: var(--brand-800)

   EYEBROW (rótulos de seção):
   → cor texto: var(--brand-600)
   → dot: var(--brand-400)

   TÍTULOS DE SEÇÃO:
   → título: hsl(p-h, 8%, 15%)
   → subtítulo: hsl(p-h, 6%, 48%)
   → régua decorativa: brand-600 → accent-500

   FORMULÁRIO / CONTATO:
   → fundo seção: gradiente brand-50 → #fff → s-h sutil
   → blobs: hsla(p-h, 25%, 72%, 0.28) e hsla(s-h, 25%, 75%, 0.22)
   → ícone topo form: var(--brand-600) bg
   → label: hsl(p-h, 8%, 28%)
   → input borda: hsla(p-h, 12%, 75%, 0.5)
   → input focus: brand-600 borda + hsla(p-h, p-s, 39%, 0.14) glow
   → placeholder: hsl(p-h, 5%, 64%)
   → nota rodapé form: hsl(p-h, 5%, 58%)
   → btn submit sombra: hsla(p-h, p-s, 39%, 0.3)

   FAQ:
   → fundo seção: #fff → brand-50 → s-h sutil
   → painel borda: hsl(p-h, 12%, 91%)
   → item borda: hsl(p-h, 10%, 92%)
   → item fundo: hsl(p-h, 18%, 98.5%)
   → pergunta: hsl(p-h, 8%, 18%)
   → resposta: hsl(p-h, 5%, 42%)
   → ícone faq: var(--brand-600)
   → plus btn: brand-100 bg + brand-600 cor

   FOOTER:
   → fundo: hsl(p-h, 15%, 11%) → hsl(p-h, 10%, 8%)
   → glows: hsla(p-h, 25%, 50%, 0.06) e hsla(s-h, 25%, 50%, 0.05)
   → textos: rgba(255,255,255, 0.4/0.45/0.55) [múltiplos tons sobre escuro]
   → crp: rgba(255,255,255,0.25)

   ================================================================ */


/* ================================================================
   CLASSES UTILITÁRIAS (não alterar — dependem dos tokens acima)
   ================================================================ */

/* Backgrounds */
.bg-brand-50   { background-color: var(--brand-50)  !important; }
.bg-brand-100  { background-color: var(--brand-100) !important; }
.bg-brand-200  { background-color: var(--brand-200) !important; }
.bg-brand-600  { background-color: var(--brand-600) !important; }
.bg-brand-700  { background-color: var(--brand-700) !important; }
.bg-accent-50  { background-color: var(--accent-50) !important; }
.bg-accent-100 { background-color: var(--accent-100) !important; }
.bg-accent-200 { background-color: var(--accent-200) !important; }

/* Textos */
.text-brand-300  { color: var(--brand-300)  !important; }
.text-brand-600  { color: var(--brand-600)  !important; }
.text-brand-700  { color: var(--brand-700)  !important; }
.text-accent-600 { color: var(--accent-600) !important; }

/* Bordas */
.border-brand-200 { border-color: var(--brand-200) !important; }
.border-brand-300 { border-color: var(--brand-300) !important; }
.border-brand-600 { border-color: var(--brand-600) !important; }

/* Transparências */
.bg-brand-100\/80  { background-color: hsla(var(--p-h), var(--p-s), 94%, 0.8)  !important; }
.bg-brand-600\/10  { background-color: hsla(var(--p-h), var(--p-s), 39%, 0.1)  !important; }
.bg-brand-600\/20  { background-color: hsla(var(--p-h), var(--p-s), 39%, 0.2)  !important; }
.bg-brand-600\/30  { background-color: hsla(var(--p-h), var(--p-s), 39%, 0.3)  !important; }
.bg-brand-500\/10  { background-color: hsla(var(--p-h), var(--p-s), 50%, 0.1)  !important; }
.bg-accent-500\/10 { background-color: hsla(var(--s-h), var(--s-s), 62%, 0.1)  !important; }

/* Gradientes */
.from-brand-50  { --tw-gradient-from: var(--brand-50)  !important; }
.from-brand-100 { --tw-gradient-from: var(--brand-100) !important; }
.from-brand-600 { --tw-gradient-from: var(--brand-600) !important; }
.to-brand-50    { --tw-gradient-to:   var(--brand-50)  !important; }
.to-brand-100   { --tw-gradient-to:   var(--brand-100) !important; }
.to-brand-900   { --tw-gradient-to:   var(--brand-900) !important; }
.to-accent-50   { --tw-gradient-to:   var(--accent-50) !important; }
.to-accent-500  { --tw-gradient-to:   var(--accent-500) !important; }

/* Hover states */
.hover\:text-brand-600:hover  { color: var(--brand-600) !important; }
.hover\:text-brand-300:hover  { color: var(--brand-300) !important; }
.hover\:text-brand-200:hover  { color: var(--brand-200) !important; }
.hover\:bg-brand-50:hover     { background-color: var(--brand-50)  !important; }
.hover\:bg-brand-700:hover    { background-color: var(--brand-700) !important; }
.hover\:border-brand-300:hover { border-color: var(--brand-300) !important; }

/* Imagem quadrada */
.img-quadrada {
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    object-position: top center !important;
    height: auto !important;
}

/* --- CORREÇÃO DE HOVER (Para Menu e Botões) --- */
/* O Tailwind usa classes específicas para hover. Precisamos forçar elas também. */

/* Texto ao passar o mouse (Menu Desktop e Mobile) */
.hover\:text-brand-600:hover { 
    color: var(--brand-600) !important; 
}
.hover\:text-brand-300:hover { 
    color: var(--brand-300) !important; 
}

/* Fundo ao passar o mouse (Menu Mobile) */
.hover\:bg-brand-50:hover { 
    background-color: var(--brand-50) !important; 
}

/* Botão Principal (Fundo escuro ao passar o mouse) */
.hover\:bg-brand-700:hover { 
    background-color: var(--brand-700) !important; 
}

/* Borda do Botão "Saiba Mais" */
.hover\:border-brand-300:hover { 
    border-color: var(--brand-300) !important; 
}

/* Links do Rodapé */
.hover\:text-brand-200:hover {
    color: var(--brand-200) !important;
}