/* ============================================================
   Autentiva — tokens base
   Cole em static/css/tokens.css e importe antes de tudo.
   Regra de ouro: cores de STATUS nunca são sobrescritas pela
   marca do cliente. A marca entra apenas nos tokens --marca-*.
   ============================================================ */

:root {
  /* --- Marca da plataforma (Autentiva) ------------------- */
  --autentiva-primaria: #3D3FC7;
  --autentiva-primaria-escura: #2B2D96;
  --autentiva-primaria-clara: #E8E9FB;
  --autentiva-secundaria: #6D3FD8;

  /* --- Marca do cliente (white-label) --------------------
     Sobrescrever no <html style="..."> ou num <style> inline
     renderizado pelo Django com os dados da empresa.        */
  --marca-primaria: var(--autentiva-primaria);
  --marca-primaria-contraste: #FFFFFF;   /* texto sobre --marca-primaria */
  --marca-secundaria: var(--autentiva-secundaria);
  --marca-superficie: var(--autentiva-primaria-clara);

  /* --- Status (FIXOS, semânticos, nunca temáveis) -------- */
  --status-valido: #0E7A4D;
  --status-valido-forte: #12A566;
  --status-valido-superficie: #E4F5EC;

  --status-suspeito: #8A5A00;
  --status-suspeito-forte: #D99400;
  --status-suspeito-superficie: #FDF3DC;

  --status-invalido: #B3261E;
  --status-invalido-forte: #D6382E;
  --status-invalido-superficie: #FCEAE8;

  --status-recolhido: #3F4657;
  --status-recolhido-forte: #64708A;
  --status-recolhido-superficie: #ECEEF2;

  /* --- Neutros ------------------------------------------- */
  --n-0:  #FFFFFF;
  --n-25: #F7F8FA;
  --n-50: #EDEFF3;
  --n-100:#D6DAE2;
  --n-300:#8A90A0;
  --n-500:#545A6B;
  --n-700:#262A38;
  --n-900:#12141C;

  --fundo: var(--n-25);
  --superficie: var(--n-0);
  --borda: var(--n-100);
  --texto: var(--n-700);
  --texto-suave: var(--n-500);

  /* --- Tipografia ---------------------------------------- */
  --fonte: system-ui, -apple-system, "Segoe UI", "Helvetica Neue", sans-serif;
  --fonte-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --t-status: 2.125rem;  /* 34px — título do resultado */
  --t-h1: 1.75rem;       /* 28px */
  --t-h2: 1.375rem;      /* 22px */
  --t-h3: 1.125rem;      /* 18px */
  --t-corpo: 1rem;       /* 16px — nunca menos no corpo */
  --t-peq: 0.875rem;     /* 14px */
  --t-rotulo: 0.8125rem; /* 13px, maiúsculas, tracking 0.08em */

  --lh-apertada: 1.1;
  --lh-titulo: 1.25;
  --lh-corpo: 1.55;

  /* --- Espaçamento (escala 4) ---------------------------- */
  --e-1: 4px;  --e-2: 8px;  --e-3: 12px; --e-4: 16px;
  --e-5: 20px; --e-6: 24px; --e-8: 32px; --e-10: 40px;
  --e-14: 56px; --e-18: 72px;

  /* --- Raio, borda, elevação ----------------------------- */
  --r-peq: 6px; --r-med: 10px; --r-gra: 16px; --r-pill: 999px;
  --sombra-1: 0 1px 2px rgba(18,20,28,.06);
  --sombra-2: 0 4px 16px rgba(18,20,28,.08);

  /* --- Alvos de toque ------------------------------------ */
  --toque-min: 48px;
}

/* Modo escuro: a página de validação abre em qualquer celular. */
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #0E1017;
    --superficie: #171A23;
    --borda: #2A2F3D;
    --texto: #ECEEF3;
    --texto-suave: #A7AEBE;

    --status-valido: #4ADE96;
    --status-valido-superficie: #10261C;
    --status-suspeito: #F5C161;
    --status-suspeito-superficie: #2A2010;
    --status-invalido: #FF8A80;
    --status-invalido-superficie: #2B1412;
    --status-recolhido: #AAB3C6;
    --status-recolhido-superficie: #1C2030;
  }
}

/* Reset mínimo */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--fonte);
  font-size: var(--t-corpo);
  line-height: var(--lh-corpo);
  color: var(--texto);
  background: var(--fundo);
  -webkit-text-size-adjust: 100%;
}
a { color: var(--marca-primaria); }
:focus-visible { outline: 3px solid var(--marca-primaria); outline-offset: 2px; }
