/* Crachá · Camada de Tokens Canônica — ÚNICA fonte da paleta de produção.
   Toda tela do produto carrega este arquivo ANTES de qualquer outra folha.

   Por que existe (defeito de 21/10/2026, achados PF-01, LV-03, LV-04 e IDX-02):
   `player-filme.html` e `live.php` declaravam apelidos como `--papel: var(--paper)`
   e `--ink: var(--ink)` dentro de um `<style>` próprio, sem carregar a folha onde
   `--paper`/`--ink` são declarados. A propriedade custom virava "guaranteed-invalid
   value", a declaração `color:` caía no valor herdado (preto) e o texto ficava com
   1,09:1 a 1,30:1 sobre o fundo escuro — CSS válido, página carregando, só os olhos
   pegavam. Com a paleta num arquivo único que toda tela carrega, não existe mais
   tela "fora do sistema".

   Tema escuro SOMENTE por :root[data-theme="dark"]. Nenhum prefers-color-scheme. */

:root{
  /* Base & Fundos */
  --paper:#F8FAFC;
  --paper-2:#F1F5F9;
  --card:#FFFFFF;

  /* Tinta & Contraste WCAG AAA */
  --ink:#0F172A;
  --ink-2:#334155;
  --mute:#64748B;
  --line:#E2E8F0;
  --line-strong:#CBD5E1;

  /* Petróleo & Acentos Institucionais */
  --teal:#0F766E;
  --teal-deep:#0B4F4A;
  --teal-soft:#E6F4F1;
  --salvia:#E6F4F1;

  /* Amarelo-Crachá & Ação Primária */
  --yellow:#FFC107;
  --yellow-warm:#F59E0B;
  --yellow-deep:#D97706;
  --yellow-ink:#78350F;
  --yellow-soft:#FEF3C7;

  /* Verde WhatsApp & Status Online */
  --wpp-green:#25D366;
  --wpp-dark:#128C7E;

  /* Feedback Semântico */
  --ok:#16A34A;
  --ok-deep:#0F766E;
  --warn:#D97706;
  --brasa:#C8372D;

  /* Tipografia */
  --display:"Bricolage Grotesque","Trebuchet MS",system-ui,-apple-system,sans-serif;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;

  /* Elevação & Sombras */
  --shadow:0 12px 32px -12px rgba(15,23,42,.12),0 4px 12px -4px rgba(15,23,42,.06);
  --shadow-lg:0 24px 50px -16px rgba(15,23,42,.2),0 8px 20px -6px rgba(15,23,42,.08);
  --shadow-sm:0 2px 6px -1px rgba(15,23,42,.08);

  /* Escala Canônica de Espaçamento (8-Point Modular Grid) */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;
  --space-16:64px;

  --sp-1:var(--space-1);
  --sp-2:var(--space-2);
  --sp-3:var(--space-3);
  --sp-4:var(--space-4);
  --sp-5:var(--space-5);
  --sp-6:var(--space-6);
  --sp-8:var(--space-8);
  --sp-10:var(--space-10);
  --sp-12:var(--space-12);
  --sp-16:var(--space-16);

  /* Alturas e Espaçamentos Travados para Botões & Entradas */
  --btn-h-lg:54px;
  --btn-px-lg:28px;
  --btn-font-lg:16.5px;

  --btn-h:48px;
  --btn-px:22px;
  --btn-font:15.5px;

  /* Piso de alvo de toque: 44px (achados IDX-07 e TR-07 — 54 alvos abaixo
     disso so na home a 390). As variacoes de tamanho de botao se distinguem
     por respiro e escala de texto, NAO encurtando abaixo do que da para tocar. */
  --btn-h-sm:44px;
  --btn-px-sm:16px;
  --btn-font-sm:14px;

  --btn-h-xs:44px;
  --btn-px-xs:12px;
  --btn-font-xs:12.5px;

  --input-h:48px;
  --input-px:16px;
  /* 16px e o limiar: abaixo disso o Safari do iPhone da zoom ao focar e
     desloca a pagina inteira (achados TR-05, IDX-06, EN-03, CT-04, AD-08). */
  --input-font:16px;

  /* Raios de Borda do Design System */
  --radius-pill:9999px;
  --radius-card:20px;
  --radius-card-sm:14px;
  --radius-input:12px;
  --radius-badge:6px;

  /* Tipografia monoespacada (usada em código de rastreio, timecode e crachá) */
  --mono:"IBM Plex Mono","SFMono-Regular",ui-monospace,Menlo,Consolas,monospace;

  /* Tintas semânticas de legibilidade (medidas, não escolhidas a olho).
     --mute (#64748B) só alcança 4,5:1 sobre --card e --paper. Sobre qualquer
     superfície tingida (--paper-2, --salvia, degradê do hero) ele cai para
     4,2 a 4,4:1. Texto secundário nessas superfícies usa --mute-tint. */
  --mute-tint:var(--ink-2);          /* #334155 · 9,2:1 a 9,5:1 sobre tingido */
  --mute-dark:#94A3B8;               /* 7,3:1 sobre o rodapé #0B131E */
  --ink-on-dark:#F8FAFC;             /* tinta sobre superfície permanentemente escura */
  --ok-ink:var(--ok-deep);           /* #0F766E · 5,5:1 sobre branco (--ok dá 3,3:1) */
  --warn-ink:var(--yellow-ink);      /* #78350F · 8,2:1 sobre --yellow-soft */
  --on-wpp:var(--ink);               /* tinta sobre o verde WhatsApp (9,0:1) */
  --wpp-send:var(--teal);            /* botão Enviar: branco sobre --teal = 5,5:1 */
  --wpp-meta:var(--ink-2);           /* hora e remetente dentro do balão claro */
  --wpp-check:var(--teal-deep);      /* visto duplo legível no balão #D9FDD3 */
}

/* Design System Crachá — Tema Claro Canônico e Blindagem de Alto Contraste
   O Crachá possui identidade visual de expediente, papel e crachá físico.
   A base é clara, luminosa, executiva e de leitura repousante (WCAG AAA).
   O tema escuro é restrito exclusivamente ao seletor explícito :root[data-theme="dark"]. */

:root[data-theme="dark"]{
  --paper:#0B131E;
  --paper-2:#152232;
  --card:#111C28;
  --ink:#F8FAFC;
  --ink-2:#CBD5E1;
  --mute:#94A3B8;
  --line:#1E293B;
  --line-strong:#334155;
  --teal:#2DD4BF;
  --teal-deep:#0D3B38;
  --teal-soft:#132E35;
  --salvia:#132E35;
  --yellow:#FFC107;
  --yellow-warm:#F59E0B;
  --yellow-deep:#FBBF24;
  --yellow-ink:#FEF3C7;
  --yellow-soft:#2E2708;
  --wpp-green:#25D366;
  --wpp-dark:#128C7E;
  --ok:#4ADE80;
  --ok-deep:#2DD4BF;
  --warn:#FBBF24;
  --brasa:#F87171;
  --shadow:0 18px 40px -24px rgba(0,0,0,.7);
  --shadow-lg:0 24px 50px -16px rgba(0,0,0,.85);
  color-scheme:dark;
  --mute-tint:var(--mute);
  --mute-dark:var(--mute);
  --ink-on-dark:var(--ink);
  --ok-ink:var(--ok);
  --warn-ink:var(--yellow-ink);
  --on-wpp:#0B131E;
  --wpp-send:var(--teal-deep);
  --wpp-meta:var(--ink-2);
  --wpp-check:var(--teal);
}