/* Tokens de tema das Ferramentas do Cadência — Afinador e Metrônomo
   (docs/THEME-V1.md). Um conjunto só de tokens semânticos; o tema escolhido
   (data-theme no <html>, posto pelo boot antes da primeira pintura) só troca os
   valores. Cor literal só aqui: as folhas das páginas (afinador.css,
   metronomo.css) leem var() e não têm cor escrita (o verify-theme confere).
   Saiu de afinador.css em 2026-10-08, quando o Metrônomo entrou. */

/* ---------- marca: igual nos dois temas (tokens da V2, dist/style.css) ---------- */
:root{
  --verde:#0F3D2E;
  --verde-2:#16503c;
  --tinta:#0B0F0E;
  --branco:#F7F6F1;
  --lima:#A7F432;
  --salvia:#CBD9C7;
  /* cabeçalho: o verde da marca nos dois temas, como no site */
  --header-bg:var(--verde);
  --header-text:var(--branco);
  --header-muted:var(--salvia);
  --header-accent:var(--lima);
  --header-line:rgba(203,217,199,.32);
  --header-accent-line:rgba(167,244,50,.55);
  --header-accent-hover:rgba(167,244,50,.10);
  --sans:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --titulo:Manrope,"DM Sans",system-ui,sans-serif;
  --marca:"Fraunces",Georgia,"Times New Roman",serif;
  --mono:ui-monospace,"SF Mono",Consolas,monospace;
  --r:20px;
  --visor-ponto:56px;
  --visor-fator:1;
  --r-sm:14px;
}

/* ---------- tema claro (padrão do produto) ----------
   Papel off-white do Cadência, cartões brancos separados por um contorno
   leve, verde profundo como estrutura e lima só sobre o verde ("lima só sobre
   fundo escuro", regra da V2). Estados em verde, âmbar e vermelho escuros,
   legíveis sobre o branco. */
:root,:root[data-theme="light"]{
  color-scheme:light;
  --bg:#F7F6F1;
  --surface:#FFFFFF;
  --surface-2:#F1F1EA;
  --surface-3:#E6EAE0;
  --surface-elevated:#FFFFFF;
  --card-shadow:0 0 0 1px #E6E8E0,0 12px 28px -22px rgba(15,61,46,.28);
  --text:#17221E;
  --text-muted:#3C4A43;
  --text-subtle:#5D6B63;
  --border:#E3E6DC;
  --border-strong:#D3D9CC;
  --accent:#16503C;
  --accent-strong:#0F3D2E;
  --accent-strong-2:#16503C;
  --on-accent-strong:#A7F432;
  --accent-soft:#EEF5DF;
  --accent-soft-hover:#E3EFCB;
  --accent-glow:rgba(167,244,50,.16);
  --selected-bg:#0F3D2E;
  --selected-text:#A7F432;
  --success:#2F6B3F;
  --success-soft:#E5F1E3;
  --warning:#8A5A00;
  --warning-soft:#FBF1DC;
  --warning-border:#EAD6A4;
  --danger:#A2382D;
  --danger-soft:#FBEAE7;
  --danger-border:#EDC3BC;
  --focus:#3D8A5F;
  --shadow-tabs:0 0 0 1px rgba(15,61,46,.06),0 6px 16px rgba(15,61,46,.10);
  --shadow-mic:0 8px 22px rgba(15,61,46,.25);
  --dock-fade-0:rgba(247,246,241,0);
  --dock-fade-1:rgba(247,246,241,.94);
  --code-bg:rgba(15,61,46,.07);
  /* medidor */
  --gauge-track:#E6EAE0;
  /* No claro o vermelho é a maior zona do arco: fica só um sopro, para o
     medidor não parecer aparelho médico; o verde do "no ponto" é o que aparece. */
  --zone-ok-opacity:.42;
  --zone-near-opacity:.30;
  --zone-off-opacity:.14;
  --needle:#17221E;
  /* mapa de tirantes */
  --drum-casco:rgba(15,61,46,.07);
  --drum-pele:#F4F4EE;
  --drum-aro:rgba(15,61,46,.16);
  --drum-estrela:rgba(22,80,60,.24);
  --drum-centro:#C9D2C6;
  --lug-fill:#FFFFFF;
  --lug-stroke:#BFC9BC;
  --lug-text:#5D6B63;
  --lug-medido-fill:#FFFFFF;
  --lug-medido-stroke:#5D6B63;
  --lug-ok-fill:#E5F1E3;
  --lug-near-fill:#FBF1DC;
  --lug-off-fill:#FBEAE7;
  --lug-ring:#0F3D2E;
  --lug-ring-glow:rgba(15,61,46,.28);
}

/* ---------- tema escuro (o visual aprovado do Afinador) ---------- */
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0A100E;
  --surface:#101915;
  --surface-2:#16211C;
  --surface-3:#1E2C25;
  --surface-elevated:#16211C;
  --card-shadow:none;
  --text:#F7F6F1;
  --text-muted:#BFCDBB;
  --text-subtle:#7E8F86;
  --border:rgba(203,217,199,.07);
  --border-strong:rgba(203,217,199,.13);
  --accent:#A7F432;
  --accent-strong:#A7F432;
  --accent-strong-2:#8FD61E;
  --on-accent-strong:#0F3D2E;
  --accent-soft:rgba(167,244,50,.12);
  --accent-soft-hover:rgba(167,244,50,.20);
  --accent-glow:rgba(167,244,50,.08);
  --selected-bg:#16503c;
  --selected-text:#A7F432;
  /* veredito: lima é "no ponto" — a mesma energia da marca */
  --success:#A7F432;
  --success-soft:rgba(167,244,50,.13);
  --warning:#F2B35B;
  --warning-soft:rgba(242,179,91,.14);
  --warning-border:rgba(242,179,91,.3);
  --danger:#FF6B5E;
  --danger-soft:rgba(255,107,94,.14);
  --danger-border:rgba(255,107,94,.3);
  --focus:#A7F432;
  --shadow-tabs:0 6px 18px rgba(0,0,0,.45);
  --shadow-mic:0 8px 24px rgba(167,244,50,.22);
  --dock-fade-0:rgba(10,16,14,0);
  --dock-fade-1:rgba(10,16,14,.92);
  --code-bg:rgba(0,0,0,.3);
  --gauge-track:#1E2C25;
  --zone-ok-opacity:.22;
  --zone-near-opacity:.22;
  --zone-off-opacity:.22;
  --needle:#F7F6F1;
  --drum-casco:rgba(203,217,199,.06);
  --drum-pele:#16211C;
  --drum-aro:rgba(203,217,199,.10);
  --drum-estrela:rgba(167,244,50,.16);
  --drum-centro:#2E3F37;
  --lug-fill:#16211C;
  --lug-stroke:rgba(203,217,199,.16);
  --lug-text:#7E8F86;
  --lug-medido-fill:#1E2C25;
  --lug-medido-stroke:#CBD9C7;
  --lug-ok-fill:#2D4320;
  --lug-near-fill:#393826;
  --lug-off-fill:#3B2D27;
  --lug-ring:#F7F6F1;
  --lug-ring-glow:rgba(247,246,241,.55);
}


/* Prévia grátis das ferramentas (FREE TOOL PREVIEW V1, dist/free-tools.mjs):
   componente compartilhado pelo Metrônomo e pelo Afinador. Só var(); nenhuma
   cor literal. O selo é discreto; o cartão do fim ocupa a área da ferramenta
   (o resto dela some), sem modal. */
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.previa-selo{align-self:center;margin:0 auto;padding:4px 12px;border-radius:999px;background:var(--surface-2);color:var(--text-muted);font-family:var(--titulo);font-size:13px;font-weight:650;letter-spacing:.01em;font-variant-numeric:tabular-nums;text-align:center;width:fit-content;max-width:100%}
.previa-selo.quase{background:var(--warning-soft);color:var(--text)}
.previa-bloqueada > :not(.previa-fim){display:none !important}
.previa-fim{display:flex;flex-direction:column;gap:10px;padding:22px 20px;text-align:left;color:var(--text);max-width:520px;width:100%;margin:0 auto;box-sizing:border-box}
.previa-etiqueta{margin:0;font-family:var(--titulo);font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.previa-titulo{margin:0;font-family:var(--titulo);font-size:24px;line-height:1.2;font-weight:800;color:var(--text);text-wrap:balance}
.previa-texto{margin:0;color:var(--text-muted);font-size:15px}
.previa-inclui{margin:2px 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.previa-inclui li{padding:5px 10px;border-radius:999px;background:var(--surface-2);color:var(--text);font-size:13px;font-weight:600}
.previa-preco{margin:4px 0 0;font-family:var(--titulo);font-size:18px;font-weight:800;color:var(--text)}
.previa-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:4px}
.previa-cta{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 22px;border-radius:999px;background:var(--accent-strong);color:var(--on-accent-strong);font-family:var(--titulo);font-size:15px;font-weight:800;text-decoration:none}
.previa-cta:hover{filter:brightness(1.05);color:var(--on-accent-strong)}
.previa-voltar{color:var(--text-muted);font-weight:650;font-size:14px;text-decoration:underline;text-underline-offset:3px}
.previa-voltar:hover{color:var(--text)}
.previa-entrar,.previa-renova{margin:0;color:var(--text-subtle);font-size:13px}
.previa-entrar a{color:var(--text-muted);font-weight:650}
body[data-previa="fim"] .dock{display:none}
@media (max-width:420px){.previa-cta{width:100%}.previa-fim{padding:20px 16px}}