/* Vita Hair — tokens de cor, compartilhados.
 *
 * Um arquivo só com as três paletas (claro, escuro, alto contraste), carregado
 * ANTES da folha de cada página: a landing e o checkout (/styles.css) e o painel
 * (/admin/styles.css). Saiu de styles.css para o painel poder usar a mesma
 * marca sem copiar valor nenhum — uma cor que muda aqui muda nas três telas.
 *
 * Tipografia e medidas (fontes, raio, piso de toque, respiro) também moram aqui,
 * no bloco do claro, porque são "iguais nos três temas" e servem às três telas.
 *
 * Só custom properties e seletores de tema. Nenhuma regra de componente entra
 * aqui, com uma exceção deliberada: o bloco "HEADER NO TEMA CLARO", que
 * redefine tokens dentro dos cabeçalhos — é paleta, não layout.
 */

/* ===========================================================================
 * TEMAS
 *
 * Três: escuro (padrão), claro e alto contraste. O <html> já vem com
 * `data-theme="dark"` no HTML, e o script inline do <head> só troca quando há
 * escolha gravada (ou prefers-contrast: more) — antes da primeira pintura, para
 * a página não piscar. `:root` sem atributo cai nos valores do claro abaixo, mas
 * na prática isso não acontece mais.
 *
 * Nenhuma cor literal existe fora destes blocos. Toda regra da folha aponta para
 * um token, e é isso que faz os três temas serem três listas de valores em vez de
 * três folhas de estilo.
 *
 * DOIS TOKENS QUE SE CONFUNDEM FÁCIL
 * `--accent` é fundo de botão: #c2255c com texto branco, igual nos três temas.
 * `--accent-text` é a mesma ideia de destaque quando ela vira TEXTO — link,
 * número, ênfase. Sobre fundo escuro o #c2255c não alcança 4.5:1, então lá ele
 * vira #f48fb1. Usar um no lugar do outro é exatamente o erro que derruba o
 * contraste, e é por isso que são dois nomes.
 *
 * As "faixas invertidas" (--invert-*) são as seções que já eram escuras no tema
 * claro: "Como usar", o card de compra, a barra de aviso, a faixa inclinada e o
 * rodapé. Elas não podem usar --ink como fundo, porque --ink é cor de texto e no
 * tema escuro isso ficaria claro sobre claro.
 * ======================================================================== */

:root,
:root[data-theme="light"] {
  color-scheme: light;

  /* superfícies */
  --bg: #fff5f7;
  --bg-soft: #fbe3ea;
  --surface: #ffffff;
  --stage: #f9d5e0;
  --stage-inner: #fde8ee;

  /* texto */
  --ink: #141014;
  --muted: #5c4a52;

  /* marca */
  --accent: #c2255c;
  --accent-on: #ffffff;
  --accent-light: #f48fb1;
  --accent-text: #c2255c;
  --accent-text-hover: #8e1b45;
  --accent-hover-bg: #8e1b45;
  --accent-hover-ink: #ffffff;
  --on-accent-soft: #ffe3ec;

  /* faixas invertidas */
  --invert-bg: #141014;
  --invert-ink: #fff5f7;
  --invert-muted: #c9b8c0;
  --invert-line: #3a2f34;
  --invert-line-soft: #332a2e;

  /* linhas e contornos */
  --line: #f0d3dc;
  --faq-line: #e8c4d0;
  --border-width: 1px;
  --focus-width: 3px;

  /* avisos */
  --warn-bg: #fde8ee;
  --warn-ink: #8e1b45;
  --warn-edge: #8e1b45;

  /* estados e detalhes */
  --tag-bg: #fce1ea;
  --method-on-bg: #fff8fa;
  --step-dim: #7a5360;

  /* efeitos */
  --glass-bg: rgba(255, 255, 255, 0.52);
  --glass-bg-fallback: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(255, 255, 255, 0.72);
  --glass-blur: blur(12px) saturate(1.4);
  --topbar-glass: rgba(255, 245, 247, 0.62);
  --topbar-solid: rgba(255, 245, 247, 0.82);
  --topbar-blur: blur(14px) saturate(1.3);
  --shadow-soft: rgba(20, 16, 20, 0.35);
  --shadow-card: rgba(20, 16, 20, 0.3);
  --shadow-strong: rgba(20, 16, 20, 0.55);
  --glow-accent: rgba(244, 143, 177, 0.45);
  --ghost-stroke: rgba(244, 143, 177, 0.22);
  --shine: rgba(255, 255, 255, 0.45);
  --shine-soft: rgba(194, 37, 92, 0.22);
  --reflex: rgba(255, 255, 255, 0.75);
  --blob-1: rgba(244, 143, 177, 0.4);
  --blob-2: rgba(194, 37, 92, 0.16);
  --blob-3: rgba(20, 16, 20, 0.1);

  /* tipografia e medidas — iguais nos três temas */
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  --gutter: 16px;
  --radius: 20px;
  --radius-lg: 28px;
  /* Piso de área de toque. Todo alvo clicável chega nisto. */
  --touch: 44px;

  /* Respiro vertical de cada faixa, e quanto o card de compra sobe para invadir a
   * faixa de cima. Os dois são variáveis porque precisam andar juntos: a faixa
   * invadida cresce exatamente o que o card avança, senão o card cobre texto. */
  --band-pad: 48px;
  --overlap: 72px;
}

/* HEADER NO TEMA CLARO ----------------------------------------------------
 *
 * No claro o header é escuro, emendado na barra de aviso logo acima (que já é
 * `--invert-bg`). O motivo é a logo: o rosa dela dá 1,8:1 sobre o `--bg` claro e
 * some; sobre este fundo passa de 8:1. Em vez de reescrever as regras do header,
 * os tokens é que são redefinidos aqui dentro — com os valores do tema escuro
 * sobre o mesmo #141014 da faixa invertida —, e links, botões de tema e idioma,
 * anel de foco e o vidro ao rolar herdam sozinhos. Vale para os três headers:
 * o da landing (.topbar), o do checkout (.cobar) e o do painel (.adminbar). */
:root:not([data-theme="dark"]):not([data-theme="contrast"]) :is(.topbar, .cobar, .adminbar) {
  color-scheme: dark;

  --bg: #141014;
  --surface: #141014;
  --ink: #fbeff3;
  --muted: #cbb6bf;
  --line: #3a2d34;
  --accent-text: #f48fb1;
  --accent-text-hover: #ffb3ce;
  /* O vidro é mais opaco que o do tema escuro porque o que passa por baixo
   * aqui é página CLARA: com 0,66 sobre um card branco, o texto secundário cai
   * para 3,2:1. Com 0,86 o pior caso (branco puro atrás) fica em 5,7:1. */
  --topbar-glass: rgba(20, 16, 20, 0.86);
  --topbar-solid: rgba(20, 16, 20, 0.92);
  --topbar-blur: blur(14px) saturate(1.2);
  --shadow-soft: rgba(0, 0, 0, 0.6);
}

/* ESCURO ------------------------------------------------------------------
 *
 * O rosa do botão continua #c2255c com texto branco, como pedido. O que muda é
 * todo destaque que é texto: #f48fb1, porque #c2255c sobre #0f0b0e dá 3,3:1 e
 * não passa de 4.5:1. */

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0f0b0e;
  --bg-soft: #1a1418;
  --surface: #1a1418;
  --stage: #231a20;
  --stage-inner: #2d222a;

  --ink: #fbeff3;
  --muted: #cbb6bf;

  --accent: #c2255c;
  --accent-on: #ffffff;
  --accent-light: #f48fb1;
  --accent-text: #f48fb1;
  /* Hover de LINK clareia (é texto sobre fundo escuro); hover de BOTÃO escurece
   * (é fundo sob texto branco). Direções opostas, tokens separados. */
  --accent-text-hover: #ffb3ce;
  --accent-hover-bg: #8e1b45;
  --accent-hover-ink: #ffffff;
  --on-accent-soft: #ffe3ec;

  /* No escuro a faixa invertida é a superfície mais alta, não o preto: inverter
   * de novo não sobraria contraste nenhum. */
  --invert-bg: #231a20;
  --invert-ink: #fbeff3;
  --invert-muted: #cbb6bf;
  --invert-line: #3a2d34;
  --invert-line-soft: #3a2d34;

  --line: #3a2d34;
  --faq-line: #3a2d34;
  --border-width: 1px;
  --focus-width: 3px;

  --warn-bg: #3d1524;
  --warn-ink: #ffc2d6;
  --warn-edge: #f48fb1;

  --tag-bg: #3d1524;
  --method-on-bg: #2a1a22;
  --step-dim: #6e5560;

  --glass-bg: rgba(35, 26, 32, 0.55);
  --glass-bg-fallback: rgba(35, 26, 32, 0.9);
  --glass-border: rgba(251, 239, 243, 0.18);
  --glass-blur: blur(12px) saturate(1.2);
  --topbar-glass: rgba(15, 11, 14, 0.62);
  --topbar-solid: rgba(15, 11, 14, 0.9);
  --topbar-blur: blur(14px) saturate(1.2);
  --shadow-soft: rgba(0, 0, 0, 0.6);
  --shadow-card: rgba(0, 0, 0, 0.55);
  --shadow-strong: rgba(0, 0, 0, 0.75);
  --glow-accent: rgba(244, 143, 177, 0.45);
  --ghost-stroke: rgba(244, 143, 177, 0.16);
  --shine: rgba(255, 255, 255, 0.2);
  --shine-soft: rgba(244, 143, 177, 0.22);
  --reflex: rgba(244, 143, 177, 0.14);
  --blob-1: rgba(194, 37, 92, 0.3);
  --blob-2: rgba(244, 143, 177, 0.12);
  --blob-3: rgba(244, 143, 177, 0.07);
}

/* ALTO CONTRASTE ---------------------------------------------------------
 *
 * Preto, branco e um rosa claro só para destaque. Aqui as transparências viram
 * cor cheia: vidro fosco e reflexo sobre texto são exatamente o que atrapalha
 * quem precisa deste tema. As formas desfocadas do fundo somem (--blob-*
 * transparentes) e landing-fx.js desliga o parallax ao ver este tema.
 *
 * As bordas passam a 2px e o anel de foco a 4px pelos tokens --border-width e
 * --focus-width, que as regras da folha já usam. */

:root[data-theme="contrast"] {
  color-scheme: dark;

  --bg: #000000;
  --bg-soft: #000000;
  --surface: #000000;
  --stage: #000000;
  --stage-inner: #000000;

  --ink: #ffffff;
  --muted: #ffffff;

  --accent: #c2255c;
  --accent-on: #ffffff;
  --accent-light: #ff8fc0;
  --accent-text: #ff8fc0;
  --accent-text-hover: #ffc2d6;
  /* No alto contraste o botão principal inverte por completo no hover: branco com
   * texto preto. É o idioma do tema, e passa 21:1. */
  --accent-hover-bg: #ffffff;
  --accent-hover-ink: #000000;
  --on-accent-soft: #ffffff;

  --invert-bg: #000000;
  --invert-ink: #ffffff;
  --invert-muted: #ffffff;
  --invert-line: #ffffff;
  --invert-line-soft: #ffffff;

  --line: #ffffff;
  --faq-line: #ffffff;
  --border-width: 2px;
  --focus-width: 4px;

  --warn-bg: #000000;
  --warn-ink: #ff8fc0;
  --warn-edge: #ff8fc0;

  --tag-bg: #000000;
  --method-on-bg: #000000;
  --step-dim: #ffffff;

  /* Sem vidro: cor cheia. */
  --glass-bg: #000000;
  --glass-bg-fallback: #000000;
  --glass-border: #ffffff;
  --glass-blur: none;
  --topbar-glass: #000000;
  --topbar-solid: #000000;
  --topbar-blur: none;

  --shadow-soft: transparent;
  --shadow-card: transparent;
  --shadow-strong: transparent;
  --glow-accent: transparent;
  --ghost-stroke: transparent;
  --shine: transparent;
  --shine-soft: transparent;
  --reflex: transparent;
  --blob-1: transparent;
  --blob-2: transparent;
  --blob-3: transparent;
}