/* Design tokens. TODA cor, espaço, fonte e raio da interface sai daqui.
   Cor solta (#hex) em tela ou em style="" é defeito: a auditoria de 09/2026 achou 32 a 97 por projeto.
   Para a marca de um cliente, sobrescreva SÓ o bloco "marca" num arquivo marca.css carregado depois. */

:root {
  /* marca (o cliente troca só isto) */
  --marca: #1f5f8b;
  --marca-forte: #164868;
  --marca-suave: #e6f0f7;
  --sobre-marca: #ffffff;

  /* neutros e superfícies */
  --fundo: #f6f7f9;
  --superficie: #ffffff;
  --superficie-2: #eef0f3;
  --borda: #d5d9e0;
  --texto: #1b1f24;
  --texto-2: #505a66;       /* contraste >= 4.5:1 sobre --superficie */
  --texto-invertido: #ffffff;

  /* estados: sempre com texto/ícone junto, cor sozinha não comunica */
  --ok: #1b7a3d;      --ok-suave: #e3f4e8;
  --alerta: #8a5a00;  --alerta-suave: #fff3d6;
  --erro: #b3261e;    --erro-suave: #fde7e6;
  --info: #1f5f8b;    --info-suave: #e6f0f7;

  /* tipografia: fonte do sistema (zero requisição externa, nada para a CSP bloquear) */
  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fonte-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --t-1: 0.8125rem;  --t-2: 0.9375rem;  --t-3: 1.0625rem;  --t-4: 1.25rem;  --t-5: 1.5rem;  --t-6: 2rem;
  --linha: 1.5;

  /* espaço em escala de 4px */
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px; --e-6: 32px; --e-7: 48px;

  --raio: 8px;
  --raio-grande: 12px;
  --sombra: 0 1px 2px rgb(0 0 0 / 0.06), 0 2px 8px rgb(0 0 0 / 0.06);
  --foco: 0 0 0 3px color-mix(in srgb, var(--marca) 45%, transparent);
  --toque: 44px;            /* alvo mínimo de toque (celular, luva, balcão) */
  --duracao: 160ms;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --marca: #6fb1de; --marca-forte: #9ccbeb; --marca-suave: #17324a; --sobre-marca: #0d1b26;
    --fundo: #0f1216; --superficie: #171b21; --superficie-2: #1f252d; --borda: #2e3640;
    --texto: #e8ebef; --texto-2: #a9b3bf; --texto-invertido: #0f1216;
    --ok: #6fd08f; --ok-suave: #143321; --alerta: #f0c060; --alerta-suave: #3a2c0c;
    --erro: #ff8a80; --erro-suave: #3d1614; --info: #6fb1de; --info-suave: #17324a;
    --sombra: 0 1px 2px rgb(0 0 0 / 0.4);
  }
}
:root[data-tema="escuro"] {
  --marca: #6fb1de; --marca-forte: #9ccbeb; --marca-suave: #17324a; --sobre-marca: #0d1b26;
  --fundo: #0f1216; --superficie: #171b21; --superficie-2: #1f252d; --borda: #2e3640;
  --texto: #e8ebef; --texto-2: #a9b3bf; --texto-invertido: #0f1216;
  --ok: #6fd08f; --ok-suave: #143321; --alerta: #f0c060; --alerta-suave: #3a2c0c;
  --erro: #ff8a80; --erro-suave: #3d1614; --info: #6fb1de; --info-suave: #17324a;
  --sombra: 0 1px 2px rgb(0 0 0 / 0.4);
}

/* Movimento reduzido: REDUZ, não desliga (transição curta continua orientando o olho). */
@media (prefers-reduced-motion: reduce) {
  :root { --duracao: 1ms; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}