/* tokens.css (03/11/2026): escalas, cores semanticas e paletas por segmento. Carregar DEPOIS de base.css. */
/* TOKENS EXTRAS — escalas e cores semânticas. Carregar depois de base.css.
   Contrastes calculados (WCAG): status sobre o fundo de cada tema >= 5,4:1; --marca-texto >= 6,2:1 no claro e >= 5,2:1 no moderado/escuro
   para todas as marcas da tabela de segmentos. Se trocar --marca por uma cor fora da tabela, recalcular. */
:root {
  /* tipografia: 8 degraus; títulos fluidos; corpo nunca abaixo de 1rem em campo */
  --t-xs: .75rem;   --t-sm: .875rem;  --t-md: 1rem;     --t-lg: 1.125rem;  --t-xl: 1.25rem;
  --t-2xl: clamp(1.375rem, 1.1rem + 1.1vw, 1.75rem);
  --t-3xl: clamp(1.75rem, 1.25rem + 2vw, 2.5rem);
  --t-4xl: clamp(2rem, 1.2rem + 3.4vw, 3.5rem);
  --lh-titulo: 1.15; --lh-texto: 1.55; --lh-ui: 1.3; --medida: 65ch;
  --peso-texto: 400; --peso-rotulo: 500; --peso-titulo: 650; /* 3 pesos por família, no máximo */

  /* espaçamento: base 4, passos que se repetem */
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px; --e-6: 32px; --e-7: 48px; --e-8: 64px; --e-9: 96px;

  /* raios: --raio (18px) do base.css continua sendo o do card */
  --r-sm: 8px; --r-md: 12px; --r-lg: var(--raio); --r-xl: 28px; --r-pilula: 999px;

  /* elevação: 4 níveis; nos temas escuros a borda (--aro) faz o trabalho, a sombra só reforça */
  --elev-1: 0 1px 2px rgb(0 0 0 / .10), 0 2px 6px -2px rgb(0 0 0 / .12);
  --elev-2: 0 2px 4px rgb(0 0 0 / .10), 0 8px 20px -8px rgb(0 0 0 / .20);
  --elev-3: 0 4px 8px rgb(0 0 0 / .12), 0 16px 32px -12px rgb(0 0 0 / .28);
  --elev-4: 0 8px 16px rgb(0 0 0 / .16), 0 28px 56px -16px rgb(0 0 0 / .40);

  /* movimento */
  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms;
  --ease-sai: cubic-bezier(.2, .8, .2, 1);   /* elemento chegando: desacelera */
  --ease-entra: cubic-bezier(.4, 0, 1, 1);   /* elemento saindo: acelera */

  /* camadas: nunca z-index 9999 */
  --z-topo: 10; --z-menu: 20; --z-modal: 30; --z-aviso: 50;

  /* alvos e ícones */
  --alvo: 44px; --alvo-min: 24px;
  --ic-xs: 12px; --ic-sm: 16px; --ic-md: 20px; --ic-lg: 24px; --ic-xl: 32px;
}

/* cores semânticas e de texto da marca, por tema (mesmos seletores do base.css) */
html[data-tema="claro"] {
  --marca-texto: color-mix(in srgb, var(--marca) 75%, #000);
  --ok: #047857; --aviso: #92400e; --erro: #b91c1c; --info: #0369a1;
  --serie-1: #0072b2; --serie-2: #d55e00; --serie-3: #009e73; --serie-4: #cc79a7; --serie-5: #b8860b; --serie-6: #56789a;
}
html[data-tema="moderado"], html[data-tema="escuro"] {
  --marca-texto: color-mix(in srgb, var(--marca) 55%, #fff);
  --ok: #4ade80; --aviso: #fbbf24; --erro: #f87171; --info: #60a5fa;
  --serie-1: #56b4e9; --serie-2: #f59e42; --serie-3: #2fd1a0; --serie-4: #e08fc0; --serie-5: #f0e442; --serie-6: #9db4d0;
}

/* ===== PALETA POR SEGMENTO: <html data-segmento="saude"> troca --marca e --marca-2 por um par com contraste conferido ===== */
html[data-segmento="saude"]       { --marca: #0e7490; --marca-2: #059669; }   /* branco/marca 5,36 · /marca-2 3,77 */
html[data-segmento="juridico"]    { --marca: #1e3a8a; --marca-2: #a16207; }   /* 10,36 · 4,92  (azul-marinho + ouro) */
html[data-segmento="financas"]    { --marca: #047857; --marca-2: #0369a1; }   /* 5,48 · 5,93 */
html[data-segmento="educacao"]    { --marca: #4f46e5; --marca-2: #ea580c; }   /* 6,29 · 3,56 */
html[data-segmento="alimentacao"] { --marca: #c2410c; --marca-2: #15803d; }   /* 5,18 · 5,02 */
html[data-segmento="infantil"]    { --marca: #7c3aed; --marca-2: #db2777; }   /* 5,70 · 4,60 */
html[data-segmento="rh"]          { --marca: #0f766e; --marca-2: #1d4ed8; }   /* 5,47 · 6,70 */
html[data-segmento="eventos"]     { --marca: #be185d; --marca-2: #7c3aed; }   /* 6,04 · 5,70 */
html[data-segmento="devocional"]  { --marca: #92400e; --marca-2: #4338ca; }   /* 7,09 · 7,90 */
html[data-segmento="vendas"]      { --marca: #2563eb; --marca-2: #ea580c; }   /* 5,17 · 3,56 */