/* AddSimp — design tokens do hotsite.
 * A paleta azul é a **mesma do app** (`frontend/src/theme.ts`), mapeada tom a tom da escala
 * já existente lá — não uma cor nova parecida. Nenhum valor cru fora daqui.
 *
 *   azul[0] #e9f1f7 → --azul-suave      azul[6] #15598a → --azul-texto
 *   azul[8] #0f3d5c → --azul (é o primaryShade do app, a cor do botão primário)
 *   azul[9] #0a2c43 → --azul-forte / --escuro-3      ciano[5] #1f8fb0 → --azul-claro
 *
 * Único tom derivado: `--escuro` do hero, porque o app não tem um quase-preto na escala.
 * Foi construído no mesmo hue (243) para ficar em família.
 *
 * Contraste de cada par verificado por cálculo (WCAG 2.1), não por estimativa:
 * branco/escuro 19.4:1 · ciano/escuro 5.2:1 · muted-inv/escuro 7.8:1 · verde/escuro 8.5:1
 * branco/azul 11.4:1 · branco/vermelho 4.8:1 · ink/claro 17.1:1 · muted/claro 5.2:1
 * azul-texto/claro 7.0:1 · azul/claro 10.8:1 · azul sobre azul-suave 10.0:1
 */

/* Fontes auto-hospedadas: o CSP do container é `font-src 'self'`. Além de manter o CSP
 * fechado, evita entregar o IP do visitante a um CDN de fontes numa página sobre LGPD. */
@font-face {
  font-family: 'Geist';
  src: url('fonts/Geist-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Geist Mono';
  src: url('fonts/GeistMono-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- superfícies escuras ---------------------------------------------- */
  --escuro: oklch(16% 0.042 243); /* derivado — o app não tem quase-preto na escala */
  --escuro-2: oklch(21% 0.05 243);
  --escuro-3: oklch(28.2% 0.057 243); /* = azul[9] #0a2c43 */
  --escuro-borda: oklch(33% 0.05 243);

  /* --- superfícies claras ------------------------------------------------ */
  --branco: oklch(100% 0 0);
  --claro: oklch(98.1% 0.005 243);
  --azul-suave: oklch(95.4% 0.012 240); /* = azul[0] #e9f1f7 */
  --borda: oklch(93% 0.011 240);
  --borda-forte: oklch(88% 0.014 240);

  /* --- texto ------------------------------------------------------------- */
  --ink: oklch(20% 0.02 243);
  --ink-2: oklch(30% 0.02 243);
  --muted: oklch(52% 0.02 243);
  --ink-inv: oklch(100% 0 0); /* sobre superfície escura */
  --muted-inv: oklch(72% 0.02 243);

  /* --- azul da marca (idêntico ao app) ------------------------------------ */
  --azul: oklch(34.6% 0.073 243); /* = azul[8] #0f3d5c — botão, ícone, numeral */
  --azul-forte: oklch(28.2% 0.057 243); /* = azul[9] #0a2c43 — hover */
  --azul-texto: oklch(44.9% 0.103 245); /* = azul[6] #15598a — realce sobre claro */
  --azul-claro: oklch(60.6% 0.105 223); /* = ciano[5] #1f8fb0 — realce sobre escuro */

  /* --- sinal --------------------------------------------------------------- */
  --vermelho: oklch(57.7% 0.215 27); /* selo de alerta */
  --vermelho-suave: oklch(94% 0.03 27); /* fundo do aviso de erro do formulário */
  --vermelho-texto: oklch(42% 0.16 27); /* texto sobre esse fundo (7.6:1) */
  --verde: oklch(72.3% 0.192 150); /* marca de conferido */
  --foco: oklch(60.6% 0.105 223);

  /* --- tipografia --------------------------------------------------------- */
  --font-display: 'Geist', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-body: 'Geist', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: clamp(1.75rem, 2.5vw + 0.75rem, 2.5rem);
  --text-display: clamp(2.25rem, 4.5vw + 0.5rem, 3.75rem);

  --measure: 62ch;

  /* --- espaço (escala 4pt) ------------------------------------------------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 6.5rem;

  --page-gutter: clamp(1.25rem, 4vw, 3rem);
  --page-max: 76rem;

  /* --- raio e sombra -------------------------------------------------------- */
  --raio-btn: 8px;
  --raio: 12px;
  --raio-g: 20px;
  --raio-pill: 999px;

  --sombra-card: 0 1px 2px oklch(20% 0.02 243 / 4%), 0 4px 16px oklch(20% 0.02 243 / 6%);
  --sombra-alta: 0 12px 40px oklch(16% 0.042 243 / 20%);

  /* --- movimento ------------------------------------------------------------ */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 180ms;

  --z-sticky: 10;
}