/*
 * Tokens do design system xiniqueverso (versão 2, manual da marca v4.2).
 * Valores e usos em referencia/design-system/tokens.md. Mudou lá, muda aqui.
 * Claro por padrão; escuro só com prefers-color-scheme: dark.
 */

:root {
  color-scheme: light dark;

  /* Paleta da marca: igual nos dois temas. */
  --noite: #2d243b;
  --lona: #f7f2e8;
  --violeta: #6650c8;
  --violeta-clara: #a596f3;
  --coral: #f28c73;
  --pistache: #deeda9;

  /* Papéis, tema claro. */
  --fundo: var(--lona);
  --fundo-elevado: #ffffff;
  --texto: var(--noite);
  --texto-suave: #625a71;
  --texto-destaque: var(--violeta);
  --destaque: var(--violeta);
  --sobre-destaque: var(--lona);
  --borda: #e2d9c8;
  --borda-forte: #857c93;
  --foco: var(--violeta);
  --sucesso: #0e6874;
  --erro: #b3261e;
  --sombra-cartao: 0 1px 0 #e2d9c8, 0 8px 24px -12px rgba(45, 36, 59, 0.18);

  /* Cores da acalena: só dentro dos blocos da acalena, nos dois temas. */
  --acalena-fundo: #1c4a4e;
  --acalena-texto: #faf6f0; /* 9,1:1 sobre o fundo */
  --acalena-texto-suave: #d9e6e5; /* 7,7:1 */
  --acalena-link: #f7e4da; /* 8,0:1 */
  --acalena-borda: #8fcbcd; /* 5,4:1: selos e botão secundário */
  --acalena-divisoria: #2e6266; /* decorativa, abaixo de 3:1 de propósito */
  --acalena-terracota: #c0603f; /* forma atrás da tela, sem texto */

  /* Famílias. */
  --sans: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI",
    sans-serif;
  --mono: "Atkinson Hyperlegible Mono", ui-monospace, "SFMono-Regular", Menlo,
    monospace;

  /* Escala de tipo: peso, tamanho/entrelinha e família. */
  --tipo-display-xl: 800 64px/68px var(--sans);
  --tipo-display-l: 800 44px/50px var(--sans);
  --tipo-titulo: 700 28px/34px var(--sans);
  --tipo-subtitulo: 500 20px/30px var(--sans);
  --tipo-corpo: 400 17px/28px var(--sans);
  --tipo-rotulo: 700 15px/20px var(--sans);
  --tipo-legenda: 400 13px/18px var(--sans);
  --tipo-sobretitulo: 600 12px/16px var(--mono);
  --tipo-mono: 400 14px/22px var(--mono);

  /* Espaçamento entre letras de cada estilo que tem um. */
  --letras-display-xl: -0.02em;
  --letras-display-l: -0.015em;
  --letras-titulo: -0.01em;
  --letras-sobretitulo: 0.08em;

  /* Espaçamento. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  /* Raios. */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* Movimento: microinterações de 150 a 250 ms. */
  --duracao-curta: 150ms;
  --duracao-media: 250ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fundo: var(--noite);
    --fundo-elevado: #3a3049;
    --texto: var(--lona);
    --texto-suave: #bdb4cc;
    --texto-destaque: var(--violeta-clara);
    --destaque: var(--violeta-clara);
    --sobre-destaque: var(--noite);
    --borda: #4a3f5c;
    --borda-forte: #958ca8;
    --foco: var(--pistache);
    --sucesso: var(--pistache);
    --erro: #ff9b8f;
    --sombra-cartao: 0 1px 0 #4a3f5c, 0 8px 24px -12px rgba(0, 0, 0, 0.5);
  }
}