/* TOKENS DO PORTFÓLIO ONIOM
 *
 * Mesma regra do design system do CRM (docs/DESIGN_SYSTEM.md, §1.1): a cor da
 * marca mora AQUI e em mais lugar nenhum. Componente nenhum escreve #hex —
 * usa `var(--marca)`, `var(--destaque)` e os derivados por color-mix.
 * Texto sobre a cor da marca é `--marca-texto`, nunca #fff solto.
 *
 * Escala: tipo 11 / 12,5 / 14 / 16 / 20 / 26 / 34 (11px é o piso); espaço em
 * múltiplos de 4; raio 6 / 10 / 14 / pílula; sombra em 4 níveis, com tom
 * azulado (da família do azul-marinho) — sombra cinza sobre fundo azulado lê
 * como sujeira.
 */
:root {
  /* ---------- marca (azul-marinho e verde do logotipo) ---------- */
  --marca: #1e2d6b;
  --marca-texto: #ffffff;
  --destaque: #3db33f;
  --destaque-texto-sobre: var(--marca); /* texto em cima do verde: o marinho passa de 5:1 */

  --marca-forte: color-mix(in srgb, var(--marca) 82%, black);
  --marca-escura: color-mix(in srgb, var(--marca) 55%, black);
  --noite: color-mix(in srgb, var(--marca) 44%, black);      /* fundo da página no site público */
  --noite-2: color-mix(in srgb, var(--marca) 62%, black);
  --marca-suave: color-mix(in srgb, var(--marca) 7%, white);
  --marca-borda: color-mix(in srgb, var(--marca) 22%, transparent);
  --destaque-forte: color-mix(in srgb, var(--destaque) 86%, black);
  --destaque-suave: color-mix(in srgb, var(--destaque) 13%, white);
  /* verde legível como TEXTO sobre fundo claro (o verde puro dá 2,9:1) */
  --destaque-texto: color-mix(in srgb, var(--destaque) 56%, black);

  /* ---------- superfícies e texto (neutros com fundo azulado) ---------- */
  --fundo: #f3f5f9;
  --superficie: #ffffff;
  --superficie-2: #f8f9fc;
  --linha: #dde2ec;
  --linha-suave: #e8ebf2;
  --texto: #131a33;
  --texto-2: #4b5573;
  --texto-3: #6b7494;

  /* ---------- semânticas (independentes da marca, de propósito) ---------- */
  --ok: #1f7a33;      --ok-suave: #e3f2e6;
  --atencao: #9a6700; --atencao-suave: #fbf0d9;
  --erro: #b3352e;    --erro-suave: #f9e7e5;

  /* ---------- tipografia ---------- */
  --fonte: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* uma família só: Inter também nos títulos e números (pesos 700–800, tracking fechado) */
  --fonte-display: var(--fonte);
  --t1: 0.6875rem;  /* 11 */
  --t2: 0.78125rem; /* 12,5 */
  --t3: 0.875rem;   /* 14 */
  --t4: 1rem;       /* 16 */
  --t5: 1.25rem;    /* 20 */
  --t6: 1.625rem;   /* 26 */
  --t7: 2.125rem;   /* 34 */

  /* ---------- espaço, raio, elevação ---------- */
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 20px; --e6: 24px;
  --e8: 32px; --e10: 40px; --e12: 48px; --e16: 64px; --e20: 80px; --e24: 96px;
  --r1: 6px; --r2: 10px; --r3: 14px; --pilula: 999px;

  --sombra-0: 0 0 0 1px color-mix(in srgb, var(--marca) 8%, transparent);
  --sombra-1: 0 1px 2px color-mix(in srgb, var(--marca) 10%, transparent);
  --sombra-2: 0 1px 2px color-mix(in srgb, var(--marca) 8%, transparent),
              0 6px 18px color-mix(in srgb, var(--marca) 8%, transparent);
  --sombra-3: 0 4px 10px color-mix(in srgb, var(--marca) 14%, transparent),
              0 24px 60px color-mix(in srgb, var(--marca) 26%, transparent);
  --brilho-destaque: 0 8px 24px color-mix(in srgb, var(--destaque) 38%, transparent);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --topo-altura: 68px;
}