/* ============================================================
   TIL: Design tokens e temas (claro, escuro, daltônico)
   Marca: roxo #6c2fe4 · branco #ffffff · creme #ede2c4 · amarelo #ffce00
   ============================================================ */

:root {
  /* --- constantes da marca --- */
  --marca-roxo:    #6c2fe4;
  --marca-roxo-2:  #8a5cf0;
  --marca-roxo-3:  #5423b8;
  --marca-branco:  #ffffff;
  --marca-creme:   #ede2c4;
  --marca-amarelo: #ffce00;

  /* --- tipografia --- */
  --fonte-base: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --fonte-mono: "Cascadia Code", Consolas, "SF Mono", monospace;

  /* --- geometria --- */
  --raio-s: 8px;
  --raio-m: 14px;
  --raio-g: 22px;
  --raio-pill: 999px;
  --transicao: 180ms ease;

  /* --- tema claro (padrão) --- */
  --bg: #f7f5fc;
  --bg-2: #ffffff;
  --bg-3: #f1ecfb;
  --texto: #1d1631;
  --texto-2: #5d5575;
  --texto-3: #6d6684;   /* WCAG AA (5.4:1 sobre branco) */
  --borda: #e4ddf4;
  --borda-campo: #8d80b8;  /* 3,3:1 (contorno perceptível em inputs) */
  --primaria: #6c2fe4;
  --primaria-hover: #5423b8;
  --primaria-suave: #efe8ff;
  --primaria-contraste: #ffffff;
  --acento: #ffce00;
  --acento-texto: #493a00;
  --creme: #ede2c4;
  --ok: #0d6539;        --ok-bg: #e1f5ea;   /* AA nas badges (6.3:1) */
  --aviso: #7d5607;     --aviso-bg: #fdf3d7; /* AA nas badges (5.9:1) */
  --erro: #c0273c;      --erro-bg: #fde8ec;
  --info: #1f5ec9;      --info-bg: #e6efff;
  --sombra: 0 10px 30px rgba(72, 33, 158, 0.10);
  --sombra-s: 0 2px 10px rgba(72, 33, 158, 0.08);
  --grafico-1: #6c2fe4; --grafico-2: #ffce00; --grafico-3: #1f9e8b;
  --grafico-4: #e46fae; --grafico-5: #4d8df6; --grafico-6: #d9853b;
}

[data-theme="dark"] {
  --bg: #120d1f;
  --bg-2: #1b1430;
  --bg-3: #251b40;
  --texto: #f0ecfa;
  --texto-2: #b6acd4;
  --texto-3: #948bad;   /* WCAG AA (5.5:1 sobre o card escuro) */
  --borda: #342a52;
  --borda-campo: #776aa6;  /* 3,7:1 sobre o fundo dos cartões escuros */
  --primaria: #9a6cf5;
  --primaria-hover: #b28df8;
  --primaria-suave: #20163c; /* AA na badge primária (4.7:1) */
  --primaria-contraste: #140d29;
  --acento: #ffce00;
  --acento-texto: #493a00;
  --creme: #3a3050;
  --ok: #4ad793;        --ok-bg: #123527;
  --aviso: #ffd24d;     --aviso-bg: #3a3010;
  --erro: #ff7d92;      --erro-bg: #421722;
  --info: #7fabff;      --info-bg: #152a4d;
  --sombra: 0 12px 34px rgba(0, 0, 0, 0.45);
  --sombra-s: 0 2px 10px rgba(0, 0, 0, 0.35);
  --grafico-1: #9a6cf5; --grafico-2: #ffce00; --grafico-3: #37c4ad;
  --grafico-4: #f08cc4; --grafico-5: #6ea3ff; --grafico-6: #f0a35e;
}

/* Tema daltônico: alto contraste + paleta Okabe-Ito (segura para
   protanopia, deuteranopia e tritanopia). Sucesso = azul, erro = vermelhão. */
[data-theme="daltonico"] {
  --bg: #ffffff;
  --bg-2: #ffffff;
  --bg-3: #f2f2f2;
  --texto: #000000;
  --texto-2: #333333;
  --texto-3: #595959;
  --borda: #8c8c8c;
  --borda-campo: #595959;
  --primaria: #4b1fa6;
  --primaria-hover: #33156e;
  --primaria-suave: #ece4ff;
  --primaria-contraste: #ffffff;
  --acento: #e69f00;
  --acento-texto: #000000;
  --creme: #f0e6c8;
  --ok: #005a8c;        --ok-bg: #d6ebf7;
  --aviso: #7a5800;     --aviso-bg: #f5e6c0;
  --erro: #a83b00;      --erro-bg: #fbe2d4;
  --info: #00558c;      --info-bg: #d6ebf7;
  --sombra: 0 6px 20px rgba(0, 0, 0, 0.22);
  --sombra-s: 0 2px 8px rgba(0, 0, 0, 0.18);
  --grafico-1: #0072b2; --grafico-2: #e69f00; --grafico-3: #009e73;
  --grafico-4: #cc79a7; --grafico-5: #56b4e9; --grafico-6: #d55e00;
}

/* ------------------------------------------------ base ------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--fonte-base);
  background: var(--bg);
  color: var(--texto);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: inline-block; }
/* O atributo hidden vale para qualquer elemento, mas a regra de display acima
   (e qualquer outra que declare display) vence ele por especificidade. Sem
   esta linha, um <img hidden> continua ocupando a tela: foi o que fazia a
   prévia de uma logo recusada seguir aparecendo junto da mensagem de erro. */
[hidden] { display: none !important; }


/* Ícone inline monocromático: sempre herda a cor do texto (nada de emoji,
   que muda de desenho e de cor a cada sistema operacional). */
.ico {
  width: 1em;
  height: 1em;
  flex: none;
  vertical-align: -0.125em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

a { color: var(--primaria); }

/* Anel de foco com contraste garantido nos 3 temas: núcleo escuro/claro
   (--texto) + halo amarelo da marca, visível sobre qualquer superfície. */
:focus-visible {
  outline: 2px solid var(--texto);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--acento);
  border-radius: 4px;
}

::selection { background: var(--primaria); color: var(--primaria-contraste); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}