/* ============================================================
   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-primaria-vivida: #7A7CE8; /* marca sobre fundo escuro (kit de marca) */
  --autentiva-secundaria: #6D3FD8;

  /* "Tinta" — fundo escuro dos heros (login, vitrine, site). Fixo nos 2 temas
     (o hero é sempre escuro). Valor sólido aqui + upgrade p/ color-mix no @supports
     abaixo. Fonte única: usado por app.css, onboarding.css e site.css. */
  --tinta: #191B3E;
  --tinta-suave: #23245A;

  /* --- 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;
  /* Botão de perigo (ex.: "Excluir conta"): vermelho ESCURO fixo nos dois temas, com
     texto branco. NÃO usa --status-invalido, que flipa para rosa-claro no dark (texto
     branco daria ~2:1). Branco sobre #B3261E = 5,9:1 / sobre #D6382E = 4,9:1 (AA). */
  --btn-perigo-bg: #B3261E;
  --btn-perigo-bg-forte: #D6382E;

  --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;

  /* --- Página /recursos (hero e CTA são escuros sempre, não
     acompanham o tema) — nomes usados por recursos.css/.html.
     rec-ok/-cinza/-violeta/-fundo-topo repetem valor de tokens já
     existentes acima; ficam como alias para não quebrar os usos
     de var(--rec-*) espalhados no arquivo. */
  --rec-ok: var(--status-valido-forte);
  --rec-ambar: #E8912B;
  --rec-vermelho: #E5484D;
  --rec-cinza: var(--n-300);
  --rec-teal: #2FB8B8;
  --rec-violeta: var(--autentiva-secundaria);
  --rec-ok-vivo: #1FA855;      /* chip do hero (ícone) */
  --rec-ambar-escuro: #d97706; /* 2ª parada do gradiente da barra âmbar */
  --rec-fundo-topo: var(--autentiva-primaria-escura);
  --rec-fundo-meio: #151635;
  --rec-fundo-base: #0a0b1a;
  --rec-cta-fundo-meio: #141534; /* CTA final tem gradiente próprio, mais escuro */
  --rec-cta-fundo-fim: #0b0c1c;
  --rec-texto: #F3F4FF;
  --rec-texto-suave: #C9CBEC;
  --rec-cta-texto-suave: #C7C9EE;
  --rec-realce: #9A9CF0;
  --rec-chip-texto: #DDE0FF;
  --rec-menta: #7be9d0;
  --rec-menta-clara: #59f0c8; /* chip do hero (ícone) */
  --rec-menta-escura: #0f2a20;
  --rec-scratch-texto: #7be9ad;
  --rec-lavanda: #a6a8ff;
  --rec-wa-bolha: #134d33;
  --rec-wa-texto: #c8f5da;

  /* Acentos do checklist de onboarding (dash-ob), um por passo. A tinta SUAVE do
     badge sai por color-mix destes no app.css (não precisa de par claro/escuro). */
  --ob-azul: #3D3FC7;
  --ob-teal: #0E9F9F;
  --ob-violeta: #7A5AF8;
  --ob-ambar: #E8912B;
  --ob-rosa: #E5487F;
  --ob-verde: #12A566;

  /* --- Site institucional (fixas) -------------------------- */
  --verde-menta: #83D0AF; /* fallback sólido; site.css faz upgrade p/ color-mix em @supports */
  --demo-marca: #7A3B2E;   /* marca fictícia "Café Aurora" (conteúdo de demo do scan) */
  --demo-marca-2: #2F5D62; /* segunda marca fictícia (carrossel da home) */
  --demo-marca-3: #8A3FB5; /* terceira marca fictícia */
  --site-pacote: #B98A5E;   /* ícone do pacote na animação "jornada"; também
    o ícone "Café e alimentos" em .setores (home) — mesmo valor */
  --site-transp-ok: #13A567; /* card "ok" da seção de transparência */
  --site-setor-cosmeticos: #D6699A; /* ícone "Cosméticos" em .setores (home) */
  --site-setor-autopecas: #4C7BD9;  /* ícone "Autopeças" em .setores (home) */
  --site-setor-moda: #8B5CF6;       /* ícone "Moda e acessórios" em .setores (home) */
  --site-mapa-suspeito: #FF8A80; /* ponto "foco suspeito" do mapa fixo-escuro
    de /impacto (home) — mesmo valor de --status-invalido no tema escuro, mas
    fixo nos 2 temas porque a seção em si é sempre escura. */

  /* --- Redesign do site público (v4, 2026-08) — VALORES IDÊNTICOS aos mockups
     aprovados. Mapa hex→token em docs/superpowers/plans/2026-08-30-redesign-site-publico.md.
     Não aproximar para tokens existentes que difiram (ex.: --site-ink #1c1d1f ≠ --n-700). --- */
  --site-ink: #1c1d1f;
  --site-text-2: #4a5261;
  --site-muted: #667085;   /* AA em texto normal sobre branco (~5.5:1); antes #8b93a3 dava ~3.1:1 e reprovava */
  --site-bg-2: #f7f8fb;
  --site-ash: #f3f4f6;
  --site-stone: #e6e8ee;
  --site-slate: #d3d8df;
  --site-accent-2: #5457d6;
  --site-accent-soft: rgba(61, 63, 199, .07);
  --site-ok-soft: #e4f5ec;
  --site-ok-borda: #bfe6d0;   /* borda do card "prova" (verde) em /transparencia */
  --site-bad-borda: #f2ccc7;  /* borda do card "não promete" (vermelho) em /transparencia */
  --site-warn: #B45309;
  --site-warn-soft: #fbf0dd;
  --site-teal: #0E9488;
  --site-pink: #DB2777;
  --site-dark: #0b0b10;
  --site-dark-2: #15151d;
  --site-dark-border: #26262f;
  --site-dark-muted: #8a8f98;
  --site-card-sh: rgba(28,40,64,.10) 0 2px 3px -2px, rgba(28,40,64,.05) 0 6px 12px -4px;
  --site-indigo-2: #6c6ee0;      /* violeta claro: camada 2, ícone "QR na sua marca", .n2 */
  --site-ok-vivo: #1FA855;       /* verde vivo do ícone "Verificação por WhatsApp" */
  --site-dark-dots: #33333f;     /* pontos do mapa-múndi na seção escura (hotspots) */
  --site-phone-notch: #2a2a33;   /* entalhe do celular no hero */
  --site-raspa-1: #c3c7d1;       /* faixa raspável (raspadinha) — tom claro do hachurado */
  --site-raspa-2: #aeb2be;       /* faixa raspável (raspadinha) — tom escuro do hachurado */
  --site-wa-bolha: #d9fdd3;      /* balão enviado no mock de WhatsApp */
  --site-wa-texto: #111b21;      /* texto do balão de WhatsApp */
  --site-indigo-3: #33359f;      /* 3ª parada do gradiente do painel de marca (/entrar) */

  /* --- Área do cliente (app) -------------------------------- */
  --status-suspeito-glifo: #3F2C00; /* glifo escuro sobre --status-suspeito-forte (branco falha AA ~2.6:1) */
  --ajuda-hero-realce: #5A5CE0; /* 1ª parada do gradiente do hero da página de ajuda */
}

/* Upgrade da "tinta" para color-mix onde há suporte (Safari 16.2+/Chrome 111+);
   o valor sólido acima é o fallback para browsers antigos. */
@supports (color: color-mix(in srgb, red, blue)) {
  :root {
    --tinta: color-mix(in srgb, var(--n-900) 72%, var(--autentiva-primaria-escura));
    --tinta-suave: color-mix(in srgb, var(--n-900) 55%, var(--autentiva-primaria-escura));
  }
}

/* Paleta escura (tokens). Aplica quando: o SO está no escuro E o usuário não forçou
   claro; OU o usuário forçou escuro (data-theme no <html>, seletor de tema do painel).
   A /v pública não tem seletor → segue só o SO (prefers-color-scheme), como sempre. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --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;

    /* acentos do onboarding — versão mais clara p/ legibilidade sobre superfície escura */
    --ob-azul: #9EA0FF;
    --ob-teal: #4FD6D6;
    --ob-violeta: #B9A6FF;
    --ob-ambar: #F2B15C;
    --ob-rosa: #FF87B0;
    --ob-verde: #45D699;
  }
}
:root[data-theme="dark"] {
  --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;

  --ob-azul: #9EA0FF;
  --ob-teal: #4FD6D6;
  --ob-violeta: #B9A6FF;
  --ob-ambar: #F2B15C;
  --ob-rosa: #FF87B0;
  --ob-verde: #45D699;
}

/* ------------------------------------------------------------------------ *
 * Site comercial + telas de auth = LIGHT por design (mockups claros; seções
 * escuras são explícitas, com fundo próprio). O redesign usa cores de texto
 * FIXAS-claras (--site-ink/--site-text-2/--site-muted) e NÃO tem bloco dark;
 * como .site pinta o fundo com --fundo (que vira #0E1017 no modo escuro do SO),
 * sem esta trava o texto escuro cairia sobre fundo escuro (ilegível). Travamos os
 * tokens semânticos em claro sob .site/.auth-page (aqui, no arquivo onde hex é
 * permitido). A /v (sem .site) segue o SO e é dark-aware, como deve; o /app usa
 * app.css e tem tema próprio. `color-scheme: light` alinha os controles do UA. */
.site, body.auth-page {
  color-scheme: light;
  --fundo: var(--n-25);
  --superficie: var(--n-0);
  --borda: var(--n-100);
  --texto: var(--n-700);
  --texto-suave: var(--n-500);
  --status-valido: #0E7A4D;      --status-valido-superficie: #E4F5EC;
  --status-suspeito: #8A5A00;    --status-suspeito-superficie: #FDF3DC;
  --status-invalido: #B3261E;    --status-invalido-superficie: #FCEAE8;
  --status-recolhido: #3F4657;   --status-recolhido-superficie: #ECEEF2;
}

/* 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; }
/* No escuro o índigo #3D3FC7 fica ~2.3:1 sobre o fundo (falha 3:1); usa a vívida. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :focus-visible { outline-color: var(--autentiva-primaria-vivida); } }
:root[data-theme="dark"] :focus-visible { outline-color: var(--autentiva-primaria-vivida); }
