/* =====================================================================
   TEMA RA — fonte única das cores, fontes, tamanhos e componentes-base.
   Base: "Design System PWA — Tema Claro e Tema Escuro" do Reinaldo (07/10/2026),
   com o contraste do tema claro corrigido e o tema Sol (alto contraste para campo).
   Regras: nenhuma tela usa cor solta — só estes tokens. Documentado em docs/04-UI-UX-DESIGN.md.
   ===================================================================== */

/* ---------- Fontes locais (licença SIL OFL 1.1 em /app/fontes/OFL-*.txt) ---------- */
@font-face{font-family:"Sora";src:url("/app/fontes/sora-latin-wght-normal.woff2") format("woff2");font-weight:100 800;font-style:normal;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url("/app/fontes/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url("/app/fontes/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* ---------- Tema escuro (padrão) ---------- */
:root,[data-theme="dark"]{
  color-scheme:dark;
  --bg-page:#07111f; --bg-sidebar:#0b1728; --surface-1:#0e1d30; --surface-2:#14263d;
  --surface-hover:rgba(255,255,255,.065);
  --text-primary:#f5f7fb; --text-secondary:#b4bfce; --text-muted:#7e8b9e;
  --border-default:rgba(255,255,255,.10); --border-strong:rgba(255,255,255,.22); --border-width:1px;
  --accent:#d5ac59; --accent-ink:#d5ac59; --on-accent:#101010; --accent-soft:rgba(213,172,89,.14);
  --accent-cyan:#49d8e8;
  --status-success:#50d6a0; --status-warning:#f2bd5b; --status-danger:#ff737d;
  --on-danger:#07111f; --status-success-soft:rgba(80,214,160,.14); --status-warning-soft:rgba(242,189,91,.14); --status-danger-soft:rgba(255,115,125,.14);
  --field-bg:#0b1728; --overlay:rgba(2,6,14,.72);
  --shadow-card:0 10px 30px rgba(0,0,0,.20);
  --shadow-focus:0 0 0 3px rgba(73,216,232,.32);
  --barra-navegador:#07111f;
}

/* ---------- Tema claro (leitura, formulários) — contraste do texto corrigido para >= 4,5:1 ---------- */
[data-theme="light"]{
  color-scheme:light;
  --bg-page:#edf2f7; --bg-sidebar:#f7f9fc; --surface-1:#ffffff; --surface-2:#f7f9fc;
  --surface-hover:rgba(11,23,40,.05);
  --text-primary:#0b1728; --text-secondary:#425269; --text-muted:#606f83;
  --border-default:rgba(11,23,40,.13); --border-strong:rgba(11,23,40,.30); --border-width:1px;
  --accent:#b9872f; --accent-ink:#7f5b1d; --on-accent:#101010; --accent-soft:rgba(185,135,47,.12);
  --accent-cyan:#07788e;
  --status-success:#126d4c; --status-warning:#946200; --status-danger:#bc3141;
  --on-danger:#ffffff; --status-success-soft:rgba(18,109,76,.10); --status-warning-soft:rgba(148,98,0,.10); --status-danger-soft:rgba(188,49,65,.10);
  --field-bg:#ffffff; --overlay:rgba(11,23,40,.45);
  --shadow-card:0 12px 30px rgba(27,44,68,.10);
  --shadow-focus:0 0 0 3px rgba(7,120,142,.30);
  --barra-navegador:#edf2f7;
}

/* ---------- Tema Sol (campo, luz forte) — todo texto >= 7:1, bordas sólidas ---------- */
[data-theme="sol"]{
  color-scheme:light;
  --bg-page:#ffffff; --bg-sidebar:#f3f5f8; --surface-1:#ffffff; --surface-2:#f3f5f8;
  --surface-hover:rgba(11,23,40,.07);
  --text-primary:#0b1728; --text-secondary:#2e3d52; --text-muted:#425269;
  --border-default:#5b6b80; --border-strong:#0b1728; --border-width:2px;
  --accent:#d5ac59; --accent-ink:#634816; --on-accent:#101010; --accent-soft:rgba(213,172,89,.12);
  --accent-cyan:#055b6b;
  --status-success:#0a4e36; --status-warning:#694500; --status-danger:#8f2531;
  --on-danger:#ffffff; --status-success-soft:rgba(10,78,54,.08); --status-warning-soft:rgba(105,69,0,.08); --status-danger-soft:rgba(143,37,49,.08);
  --field-bg:#ffffff; --overlay:rgba(11,23,40,.55);
  --shadow-card:none;
  --shadow-focus:0 0 0 3px #055b6b;
  --barra-navegador:#ffffff;
}

/* ---------- Tipografia, espaço, raio, movimento (iguais nos 3 temas) ---------- */
:root{
  --font-display:"Sora",system-ui,"Segoe UI",Roboto,sans-serif;
  --font-body:"Atkinson Hyperlegible",system-ui,"Segoe UI",Roboto,sans-serif;
  --text-xs:.75rem; --text-sm:.875rem; --text-md:1rem; --text-lg:1.25rem; --text-xl:1.75rem; --text-2xl:clamp(2rem,6vw,2.75rem);
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.5rem; --space-6:2rem; --space-7:3rem;
  --radius-sm:.625rem; --radius-md:.875rem; --radius-pill:999px;
  --motion-fast:160ms; --motion-normal:240ms; --ease-standard:cubic-bezier(.2,.8,.2,1);
  --toque:44px;
  /* Assinatura: sempre "papel" branco e tinta escura, em qualquer tema — sai legível no recibo impresso. */
  --papel:#ffffff; --tinta-assinatura:#0b1728;
  /* Texto sobre FOTO (banner da captação): fixo em qualquer tema, porque o fundo é a imagem.
     Branco sobre a faixa de 85–95% de azul-noite dá ~12:1 mesmo com a foto toda branca. */
  --sobre-foto-texto:#ffffff; --sobre-foto-texto-2:#e6ebf2;
  --sobre-foto-vazio:rgba(7,17,31,0); --sobre-foto-leve:rgba(7,17,31,.35); --sobre-foto-forte:rgba(7,17,31,.85); --sobre-foto-max:rgba(7,17,31,.95);
  /* Cartaz de campanha (impresso): a marca fixa em qualquer tema, azul-noite e dourado do selo (como na v5.89). */
  --cartaz-noite:#0c1a30; --cartaz-creme:#ede7d6; --cartaz-ouro:#e4c05a; --cartaz-ouro-claro:#f0d67a; --cartaz-ouro-forte:#d4af37;
  --cartaz-cinza:#93a3be; --cartaz-texto-2:#3a4a66; --cartaz-banner:#eef2f7; --cartaz-borda-qr:#c6972f; --cartaz-predio:#9a7420;
  --cartaz-rodape:#f4f1ea; --cartaz-tinta-cta:#10203a;
  /* App do técnico: a faixa do projeto e os pinos da planta são fixos em qualquer tema (como na v5.89; 7D-4b). */
  --faixa-noite:#0b1728; --faixa-texto:#ffffff; --faixa-ouro:#e4c05a; --faixa-texto-2:#93a3be;
  --pino-borda:#0d0d11; --pino-sombra:rgba(0,0,0,.4);
  /* Conexão na cotação impressa: Zigbee e Wi-Fi com cor própria, para o fornecedor bater o olho. */
  --conexao-zigbee:#7a5aa6; --conexao-wifi:#2e6fa6;
}

/* ---------- Base ---------- */
html{background:var(--bg-page)}
body{background:var(--bg-page);color:var(--text-primary);font-family:var(--font-body);font-size:var(--text-md);line-height:1.55}
h1,h2,h3,.titulo{font-family:var(--font-display);letter-spacing:-.01em}
.num,.valor{font-variant-numeric:tabular-nums}
:focus-visible{outline:none;box-shadow:var(--shadow-focus);border-radius:var(--radius-sm)}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* ---------- Ícones (sprite autoral /app/icons.svg; traço = cor do texto) ---------- */
.i{width:1.25em;height:1.25em;flex:0 0 auto;display:inline-block;vertical-align:-.25em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.i.cheio{fill:currentColor;--preenche:currentColor} /* --preenche entra no desenho do icons.svg (o estilo de lá deixa vazado por padrão) */

/* ---------- Botões: um primário por bloco ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--toque);padding:.75rem 1.1rem;
  border-radius:var(--radius-sm);border:var(--border-width) solid transparent;font:700 var(--text-md)/1.2 var(--font-body);cursor:pointer;
  transition:background var(--motion-fast) var(--ease-standard),border-color var(--motion-fast) var(--ease-standard)}
.btn-primario{background:var(--accent);color:var(--on-accent)}
[data-theme="sol"] .btn-primario{border-color:var(--border-strong)}
.btn-secundario{background:transparent;color:var(--text-primary);border-color:var(--border-strong)}
.btn-fantasma{background:transparent;color:var(--accent-ink)}
.btn-perigo{background:var(--status-danger);color:var(--on-danger)}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* ---------- Seletor de tema (Claro / Escuro / Sol) ---------- */
.seletor-tema{display:inline-flex;gap:2px;padding:2px;border-radius:var(--radius-pill);background:var(--surface-2);border:var(--border-width) solid var(--border-default)}
.seletor-tema button{display:inline-grid;place-items:center;width:var(--toque);height:var(--toque);border:0;border-radius:var(--radius-pill);background:transparent;color:var(--text-secondary);cursor:pointer}
.seletor-tema button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}