/* ═══════ Studio Airla Bittencourt — marca.css ═══════
   Fonte única de verdade das cores, fontes e raios da casa. Os valores
   são os da /agenda (agenda.css), que é a referência visual: rosa suave,
   ameixa para texto sobre blush, fundo #FFF7FB, DM Sans em tudo.

   Ordem de carregamento: esta folha entra ANTES de qualquer outra, para
   as demais só consumirem var(--ab-*). Nenhum seletor aqui mexe em
   estrutura — só tokens, base tipográfica e o bloco de aliases. */

:root{
  /* rosa */
  --ab-rosa:#EC4899;
  --ab-rosa-suave:#F472B6;
  --ab-rosa-claro:#FBCFE8;
  --ab-blush:#FCE7F3;
  --ab-selecao:#FDF2F8;
  /* ameixa: texto sobre blush e títulos */
  --ab-ameixa:#831843;
  --ab-ameixa-media:#9D174D;
  /* neutros */
  --ab-fundo:#FFF7FB;
  --ab-grafite:#1E293B;
  --ab-cinza:#64748B;
  --ab-borda:#E2E8F0;
  --ab-neve:#F1F5F9;
  --ab-branco:#FFFFFF;
  /* estados */
  --ab-ok:#15803D;
  --ab-ok-fundo:#DCFCE7;
  --ab-alerta-fundo:#FEF9C3;
  --ab-alerta-borda:#FDE68A;
  --ab-alerta-texto:#713F12;
  --ab-erro:#DC2626;
  --ab-erro-fundo:#FEE2E2;
  /* degradês */
  --ab-degrade:linear-gradient(135deg,#F472B6,#EC4899);
  --ab-degrade-cabecalho:linear-gradient(135deg,#FBCFE8,#F9A8D4);
  /* faixa blush no alto das páginas da loja, descendo até o fundo */
  --ab-faixa:linear-gradient(180deg,#FBCFE8 0%,#F9A8D4 42%,rgba(249,168,212,0) 100%);
  /* sombras e cantos */
  --ab-sombra:0 1px 3px rgba(15,23,42,.08);
  --ab-sombra-alta:0 10px 30px -12px rgba(236,72,153,.35);
  --ab-raio-cartao:16px;
  --ab-raio:12px;
  /* tipografia */
  --ab-fonte:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ab-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  /* áreas do painel (23/09/2026, violeta A CONFIRMAR COM A DONA): ESTÚDIO
     na ameixa da casa e LOJA num violeta, o tom vizinho do rosa, para as
     duas páginas não se confundirem de relance. Trocar a cor da loja é
     mexer só aqui. Cada área tem a cor dela (etiqueta, faixa e o mês
     aberto dos gráficos), o "meio" (o mês anterior), o "apagado" (os
     outros meses), o fundo claro e a tinta de texto sobre a cor. Os pares
     passam no validador de paleta (daltonismo e visão normal) contra o
     cartão; o teste painel-financeiro refaz as contas. */
  --ab-estudio:#9D174D;
  --ab-estudio-meio:#EC4899;
  --ab-estudio-apagado:#D69FB3;
  --ab-estudio-fundo:#FCE7F3;
  --ab-estudio-tinta:#FFFFFF;
  --ab-loja:#5B21B6;
  --ab-loja-meio:#8B5CF6;
  --ab-loja-apagado:#B2A9DA;
  --ab-loja-fundo:#EDE9FE;
  --ab-loja-tinta:#FFFFFF;
  /* o violeta no papel da ameixa, do rosa-claro e do degradê, para as
     telas da loja (texto de título, borda, botão ativo) */
  --ab-loja-texto:#4C1D95;
  --ab-loja-texto-medio:#5B21B6;
  --ab-loja-borda:#DDD6FE;
  --ab-loja-selecao:#F5F3FF;
  --ab-loja-degrade:linear-gradient(135deg,#7C3AED,#5B21B6);
}

/* ───────── modo escuro ─────────
   Mesmos nomes, valores trocados: qualquer página que ponha data-tema no
   <html> vira escura sem uma regra nova sequer. A ameixa vira rosa-claro
   porque ela faz papel de "texto de título" sobre superfícies — em fundo
   escuro precisa clarear, não escurecer. Quem não liga o modo continua
   exatamente como antes. "escuro" força; "auto" segue o aparelho. */
html[data-tema="escuro"]{
  color-scheme:dark;
  --ab-fundo:#17101B;
  --ab-branco:#241A29;
  --ab-neve:#2E2233;
  --ab-borda:#3E2E45;
  --ab-grafite:#F4E9EF;
  --ab-cinza:#B8A3B0;
  --ab-blush:#3A2031;
  --ab-selecao:#33192B;
  --ab-rosa-claro:#5A2B46;
  --ab-ameixa:#F9A8D4;
  --ab-ameixa-media:#F472B6;
  --ab-ok:#4ADE80;
  --ab-ok-fundo:#153126;
  --ab-alerta-fundo:#3A2E0F;
  --ab-alerta-borda:#6B5412;
  --ab-alerta-texto:#FDE68A;
  --ab-erro:#F87171;
  --ab-erro-fundo:#421C1C;
  --ab-degrade-cabecalho:linear-gradient(135deg,#4A1C3A,#6E2352);
  --ab-faixa:linear-gradient(180deg,#4A1C3A 0%,#3A1830 42%,rgba(58,24,48,0) 100%);
  --ab-sombra:0 1px 3px rgba(0,0,0,.45);
  --ab-sombra-alta:0 10px 30px -12px rgba(0,0,0,.7);
  /* áreas no escuro: passos próprios, validados contra o cartão #241A29.
     O "apagado" é quase neutro, para o mês anterior (o "meio") se
     destacar dos meses antigos nas barras. */
  --ab-estudio:#EE5399;
  --ab-estudio-meio:#A54C71;
  --ab-estudio-apagado:#594B50;
  --ab-estudio-fundo:#3A2031;
  --ab-estudio-tinta:#17101B;
  --ab-loja:#9A73FF;
  --ab-loja-meio:#705FA9;
  --ab-loja-apagado:#504E5A;
  --ab-loja-fundo:#2B2145;
  --ab-loja-tinta:#17101B;
  --ab-loja-texto:#C4B5FD;
  --ab-loja-texto-medio:#A78BFA;
  --ab-loja-borda:#3F3263;
  --ab-loja-selecao:#261D3A;
  --ab-loja-degrade:linear-gradient(135deg,#B69CFF,#9A73FF);
}
@media (prefers-color-scheme:dark){
  html[data-tema="auto"]{
    color-scheme:dark;
    --ab-fundo:#17101B;
    --ab-branco:#241A29;
    --ab-neve:#2E2233;
    --ab-borda:#3E2E45;
    --ab-grafite:#F4E9EF;
    --ab-cinza:#B8A3B0;
    --ab-blush:#3A2031;
    --ab-selecao:#33192B;
    --ab-rosa-claro:#5A2B46;
    --ab-ameixa:#F9A8D4;
    --ab-ameixa-media:#F472B6;
    --ab-ok:#4ADE80;
    --ab-ok-fundo:#153126;
    --ab-alerta-fundo:#3A2E0F;
    --ab-alerta-borda:#6B5412;
    --ab-alerta-texto:#FDE68A;
    --ab-erro:#F87171;
    --ab-erro-fundo:#421C1C;
    --ab-degrade-cabecalho:linear-gradient(135deg,#4A1C3A,#6E2352);
    --ab-faixa:linear-gradient(180deg,#4A1C3A 0%,#3A1830 42%,rgba(58,24,48,0) 100%);
    --ab-sombra:0 1px 3px rgba(0,0,0,.45);
    --ab-sombra-alta:0 10px 30px -12px rgba(0,0,0,.7);
    --ab-estudio:#EE5399;
    --ab-estudio-meio:#A54C71;
    --ab-estudio-apagado:#594B50;
    --ab-estudio-fundo:#3A2031;
    --ab-estudio-tinta:#17101B;
    --ab-loja:#9A73FF;
    --ab-loja-meio:#705FA9;
    --ab-loja-apagado:#504E5A;
    --ab-loja-fundo:#2B2145;
    --ab-loja-tinta:#17101B;
    --ab-loja-texto:#C4B5FD;
    --ab-loja-texto-medio:#A78BFA;
    --ab-loja-borda:#3F3263;
    --ab-loja-selecao:#261D3A;
    --ab-loja-degrade:linear-gradient(135deg,#B69CFF,#9A73FF);
  }
}

/* ───────── base ───────── */
html{
  font-family:var(--ab-fonte);
  -webkit-text-size-adjust:100%;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
/* botões e campos herdam a fonte: sem isto o navegador põe Arial neles */
button,input,select,textarea{font:inherit}
::selection{background:rgba(244,114,182,.32)}
:focus-visible{outline:3px solid rgba(236,72,153,.35);outline-offset:2px}

/* ───────── aliases das variáveis antigas ─────────
   As folhas e os <style> das lojas ainda falam em "ouro", "vinho",
   "marfim"... Aqui cada nome antigo aponta para um token da casa, então
   qualquer regra esquecida já nasce rosa em vez de dourada. Podem sumir
   quando o último uso for apagado. */
:root{
  /* destaques dourados → rosa */
  --ouro:var(--ab-rosa);
  --neon:var(--ab-rosa);
  --ouro-2:var(--ab-ameixa-media);
  --ouro-escuro:var(--ab-ameixa-media);
  --ouro-claro:var(--ab-rosa-claro);
  --roxo-neon:var(--ab-rosa-suave);
  /* vinhos e verdes de título → ameixa */
  --vinho:var(--ab-ameixa);
  --vinho-2:var(--ab-ameixa);
  --rosa-vinho:var(--ab-ameixa);
  --rosa-forte:var(--ab-ameixa-media);
  --musgo:var(--ab-ameixa);
  --verde:var(--ab-ameixa);
  --verde-fundo:var(--ab-ameixa);
  --verde-escuro:var(--ab-ameixa);
  --verde-claro:var(--ab-rosa-claro);
  /* texto corrido → grafite/cinza */
  --tinta:var(--ab-grafite);
  --texto:var(--ab-grafite);
  --texto-2:var(--ab-cinza);
  /* fundos claros e escuros → fundo da casa */
  --marfim:var(--ab-fundo);
  --rosa-neve:var(--ab-fundo);
  --creme:var(--ab-fundo);
  --creme-2:var(--ab-blush);
  --noite:var(--ab-fundo);
  --carta:var(--ab-branco);
  /* "rosa" nas páginas antigas era uma cor de borda/pele clara */
  --rosa:var(--ab-rosa-claro);
  --rosa-medio:var(--ab-rosa-claro);
  --whats:var(--ab-ok);
  /* cores por loja usadas no código do pedido pago */
  --c-kits:var(--ab-ameixa);
  --c-sex:var(--ab-ameixa);
  --c-bio:var(--ab-ameixa);
}

/* ───────── botão de tema do site ─────────
   Plantado pelo /js/tema.js: um círculo de vidro fosco fixo no canto
   superior direito, como nos apps de câmera — sol quando está claro, lua
   quando está escuro. A dica com o nome do tema aparece ao passar o mouse
   e por um instante depois do toque. O painel usa o seu próprio (.tema-botao). */
.tema-flutuante{
  position:fixed;top:14px;right:14px;z-index:60;
  width:44px;height:44px;padding:0;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.55);
  background:rgba(255,255,255,.38);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:0 4px 18px rgba(15,23,42,.12);
  color:var(--ab-ameixa);cursor:pointer;
  transition:background .2s ease,transform .15s ease;
}
.tema-flutuante:hover{background:rgba(255,255,255,.55)}
.tema-flutuante:active{transform:scale(.94)}
.tema-flutuante svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.tema-flutuante .tema-lua{display:none;fill:currentColor;stroke:none}
html[data-tema-efetivo="escuro"] .tema-flutuante{
  border-color:rgba(255,255,255,.18);background:rgba(20,12,24,.45);color:#F9A8D4;
  box-shadow:0 4px 18px rgba(0,0,0,.45);
}
html[data-tema-efetivo="escuro"] .tema-flutuante:hover{background:rgba(20,12,24,.65)}
html[data-tema-efetivo="escuro"] .tema-flutuante .tema-sol{display:none}
html[data-tema-efetivo="escuro"] .tema-flutuante .tema-lua{display:block}
.tema-flutuante-dica{
  position:absolute;right:52px;top:50%;transform:translateY(-50%) translateX(6px);
  white-space:nowrap;padding:6px 10px;border-radius:999px;
  background:var(--ab-branco);color:var(--ab-cinza);border:1px solid var(--ab-rosa-claro);
  font:600 12px/1 var(--ab-fonte);opacity:0;pointer-events:none;
  transition:opacity .2s ease,transform .2s ease;
}
.tema-flutuante-dica b{color:var(--ab-ameixa-media)}
.tema-flutuante:hover .tema-flutuante-dica,
.tema-flutuante:focus-visible .tema-flutuante-dica,
.tema-flutuante.tema-mostra-dica .tema-flutuante-dica{opacity:1;transform:translateY(-50%) translateX(0)}
@media print{.tema-flutuante{display:none}}