/* variaveis.css — Design System (tokens de cor, raio, sombra, tipografia) */
:root {
  --dc-azul: #3367d6;
  --dc-azul-escuro: #244da8;
  --dc-amarelo: #ffc928;
  --dc-verde: #44b678;
  --dc-coral: #ff704f;
  --dc-roxo: #8357c5;
  --dc-fundo: #f7f9fc;
  --dc-texto: #253041;
  --dc-texto-suave: #667085;
  --dc-borda: #dfe5ec;
  --dc-branco: #ffffff;

  --dc-raio-pequeno: 8px;
  --dc-raio-medio: 16px;
  --dc-raio-grande: 24px;

  --dc-sombra-suave: 0 4px 14px rgba(0, 0, 0, 0.08);
  --dc-sombra-card: 0 8px 24px rgba(0, 0, 0, 0.10);

  --dc-fonte-base: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Mapeia tokens do projeto para variáveis do Bootstrap sem sobrescrever classes. */
  --bs-primary: var(--dc-azul);
  --bs-body-bg: var(--dc-fundo);
  --bs-body-color: var(--dc-texto);
  --bs-body-font-family: var(--dc-fonte-base);
  --bs-link-color: var(--dc-azul);
  --bs-link-hover-color: var(--dc-azul-escuro);
  --bs-border-color: var(--dc-borda);
}

@media (prefers-color-scheme: dark) {
  /* O site é claro por design (público infantil). Mantemos coerência mesmo no dark. */
  :root { color-scheme: light; }
}