/* Camada base — utilitários da casca (barra fixa, botões, superfícies).
   Usada por index.html, termos.html e privacidade.html. */

/* ---------- Tema claro/escuro ----------
   Cada cor do design system (docs/DESIGN.md, traduzida em tailwind-config.js)
   vira uma variável "R G B" em vez de um hex fixo, para o Tailwind poder
   aplicar opacidade (bg-x/20) e para o modo escuro poder redefinir só o
   necessário aqui, sem tocar em nenhuma classe do HTML. Tokens "-fixed"
   (Material Design 3) ficam de fora de propósito: continuam iguais nos
   dois temas, é para isso que existem. */
:root {
    --nav-h: 76px;

    --color-background: 247 249 251;
    --color-surface: 247 249 251;
    --color-surface-dim: 216 218 220;
    --color-surface-bright: 247 249 251;
    --color-surface-container-lowest: 255 255 255;
    --color-surface-container-low: 242 244 246;
    --color-surface-container: 236 238 240;
    --color-surface-container-high: 230 232 234;
    --color-surface-container-highest: 224 227 229;
    /* Só é usada como texto na seção final, que já é escura nos dois temas
       (bg-on-background sem "dark:") — por isso fica de fora do html.dark,
       senão o texto ficaria cinza-escuro sobre fundo escuro. */
    --color-surface-variant: 224 227 229;
    --color-on-surface: 25 28 30;
    --color-on-surface-variant: 87 65 71;
    --color-on-background: 25 28 30;
    --color-inverse-surface: 45 49 51;
    --color-inverse-on-surface: 239 241 243;
    --color-outline: 139 112 119;
    --color-outline-variant: 222 191 198;

    --color-primary: 177 31 98;
    --color-on-primary: 255 255 255;
    --color-primary-container: 255 95 158;
    --color-on-primary-container: 102 0 52;
    --color-inverse-primary: 255 177 200;
    --color-surface-tint: 177 31 98;
    --color-secondary: 141 0 217;
    --color-on-secondary: 255 255 255;
    --color-secondary-container: 170 48 250;
    --color-on-secondary-container: 255 251 255;
    --color-tertiary: 86 94 116;
    --color-on-tertiary: 255 255 255;
    --color-tertiary-container: 145 153 177;
    --color-on-tertiary-container: 41 49 69;

    --color-error: 186 26 26;
    --color-on-error: 255 255 255;
    --color-error-container: 255 218 214;
    --color-on-error-container: 147 0 10;

    /* Tokens "fixed": mesmo valor nos dois temas (ver comentário acima) */
    --color-primary-fixed: 255 217 226;
    --color-primary-fixed-dim: 255 177 200;
    --color-on-primary-fixed: 62 0 29;
    --color-on-primary-fixed-variant: 142 0 74;
    --color-secondary-fixed: 243 218 255;
    --color-secondary-fixed-dim: 227 181 255;
    --color-on-secondary-fixed: 47 0 76;
    --color-on-secondary-fixed-variant: 110 0 171;
    --color-tertiary-fixed: 218 226 253;
    --color-tertiary-fixed-dim: 190 198 224;
    --color-on-tertiary-fixed: 19 27 46;
    --color-on-tertiary-fixed-variant: 63 70 92;

    /* Sombra dos cards e do botão primário — só a intensidade muda no escuro */
    --shadow-soft: 0 10px 40px rgba(0, 0, 0, 0.04);
    --btn-shadow: 0 8px 24px -6px rgba(255, 95, 158, 0.5);
    --btn-shadow-hover: 0 12px 32px -6px rgba(255, 95, 158, 0.6);
}

/* Fundo #0D0D12 com dois tons de superfície acima dele (#121218, #17171F)
   para cards e chips ganharem profundidade real, não uma inversão simples.
   "primary"/"secondary" ficam mais claros aqui porque, como texto sobre um
   fundo quase preto, os tons originais (pensados para fundo claro) perdem
   contraste. */
html.dark {
    --color-background: 13 13 18;
    --color-surface: 13 13 18;
    --color-surface-dim: 205 205 214;
    --color-surface-bright: 13 13 18;
    --color-surface-container-lowest: 13 13 18;
    --color-surface-container-low: 18 18 24;
    --color-surface-container: 23 23 31;
    --color-surface-container-high: 30 30 40;
    --color-surface-container-highest: 38 38 50;
    --color-on-surface: 244 244 247;
    --color-on-surface-variant: 168 168 180;
    --color-on-background: 13 13 18;
    --color-inverse-surface: 224 227 229;
    --color-inverse-on-surface: 25 28 30;
    --color-outline: 255 255 255;
    --color-outline-variant: 255 255 255;

    --color-primary: 255 111 178;
    --color-secondary: 179 92 255;

    --shadow-soft: 0 10px 40px rgba(0, 0, 0, 0.55);
    --btn-shadow: 0 8px 28px -4px rgba(255, 95, 158, 0.65);
    --btn-shadow-hover: 0 14px 38px -4px rgba(255, 95, 158, 0.75);
}

/* Troca curta e suave ao alternar o tema — não é uma animação decorativa,
   é a própria transição pedida para o toggle. */
*, *::before, *::after {
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, fill .2s ease, stroke .2s ease;
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none; }
}

.glass-panel {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.5);
}
.gradient-text {
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.btn-primary-gradient {
    background: linear-gradient(135deg, #FF5F9E 0%, #8d00d9 100%);
    box-shadow: var(--btn-shadow);
    transition: all 0.3s ease;
}
.btn-primary-gradient:hover {
    transform: translateY(-2px);
    box-shadow: var(--btn-shadow-hover);
}

/* Reveal Animation Classes */
.reveal-up { opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal-up.active { opacity: 1; transform: translateY(0); }

/* Soft shadows */
.shadow-soft { box-shadow: var(--shadow-soft); }

/* ---------- Menu mobile do header ----------
   O comportamento (abrir/fechar) vive em menu-mobile.js; aqui só a
   animação. Ícone hambúrguer/X: duas camadas empilhadas no mesmo botão,
   cada uma girando/some conforme o aria-expanded do próprio botão — só
   CSS, o JS apenas troca o atributo (também serve de estado de
   acessibilidade). */
.menu-mobile-icone-abrir,
.menu-mobile-icone-fechar {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .25s ease, transform .25s ease;
}
.menu-mobile-icone-fechar { opacity: 0; transform: rotate(-90deg) scale(.5); }
.menu-mobile-botao[aria-expanded="true"] .menu-mobile-icone-abrir { opacity: 0; transform: rotate(90deg) scale(.5); }
.menu-mobile-botao[aria-expanded="true"] .menu-mobile-icone-fechar { opacity: 1; transform: rotate(0deg) scale(1); }

/* Painel: cresce dentro da própria nav (que já é sticky), então o resto
   da página só desliza pra baixo — sem precisar de overlay/backdrop
   separado. max-height (não height) é o que permite animar a partir de
   "fechado" sem depender de medir a altura real do conteúdo em JS. */
.menu-mobile-painel {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(-6px);
    transition: max-height .3s ease, opacity .22s ease, transform .22s ease;
}
.menu-mobile-painel.menu-mobile-aberto {
    max-height: 420px;
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .menu-mobile-icone-abrir,
    .menu-mobile-icone-fechar,
    .menu-mobile-painel { transition: none; }
}