/*
 * Art direction tokens, aluno app.
 * "Estúdio à noite" DA (09/09/2026). Colors live in
 * tokens-marca.css (per organisation); here: rhythm, radii, typography.
 */

:root {
  /* --cor-* tokens from the first DA: no longer referenced by any screen,
     kept so nothing breaks. */
  --cor-fundo: #0B1517;
  --cor-branco: #FFFFFF;
  --cor-superficie: #132124;
  --cor-tinta: #EEF3F1;
  --cor-terra: #8A9C99;
  --cor-framboesa: #3FD1B0;
  --cor-verde: #4CC38A;
  --cor-vinho: #E0655A;

  /* Background OUTSIDE the column (desktop): a black deeper than the
     page, so the column reads as a phone lying flat. No text is ever
     placed on it. */
  --cor-fundo-exterior: #050A0B;

  /* Hauteurs fixes de la coquille. */
  --altura-cabecalho: 64px;
  --altura-nav-inferior: 68px;

  /* Espacement. */
  --espaco-nano: 4px;
  --espaco-micro: 8px;
  --espaco-curto: 14px;
  --espaco-medio: 20px;
  --espaco-largo: 28px;
  --espaco-amplo: 40px;
  --espaco-generoso: 56px;
  --espaco-epico: 80px;

  /* Radii. Buttons are no longer pills: a clear radius, but not round.
     The pill stays defined for the rare status badges. */
  --raio-pequeno: 8px;
  --raio-medio: 14px;
  --raio-grande: 20px;
  --raio-pilula: 999px;

  /* Elevation: on dark, the card stands out through its surface, not
     through a shadow. A deep shadow is used only for what floats
     (fixed rodapé, descanso timer). */
  --sombra-cartao: none;
  --sombra-flutuante: 0 -8px 24px rgba(0, 0, 0, 0.45);

  /* Typography. TWO clearly distinct families:
     Archivo Variable (wide grotesque, wght/wdth axes) carries all text
     and the large figures; Azeret Mono carries the DATA (time, kg, reps,
     kcal, dates) so a number reads as a number. */
  --fonte-display: "Archivo Variable", "Archivo", "Segoe UI", Arial, sans-serif;
  --fonte-texto: "Archivo Variable", "Archivo", "Segoe UI", Arial, sans-serif;
  --fonte-mono: "Azeret Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* Scale, 390 px base. The hero figure is the app's signature. */
  --tamanho-numero-heroi: 72px;
  --altura-numero-heroi: 1;
  --tamanho-h1: 28px;
  --altura-h1: 1.15;
  --tamanho-marca: 22px;
  --altura-marca: 1.2;
  --tamanho-botao: 16px;
  --altura-botao: 1.3;
  --tamanho-h2: 18px;
  --altura-h2: 1.3;
  --tamanho-corpo: 16px;
  --altura-corpo: 1.5;
  --tamanho-dado: 16px;
  --altura-dado: 1.3;
  --tamanho-etiqueta: 13px;
  --altura-etiqueta: 1.4;

  /* Foco, sempre visível. */
  --foco-largura: 2px;
  --foco-deslocamento: 3px;

  /* Mouvement : court, lié à un changement d'état. */
  --duracao-transicao: 160ms;
  --duracao-celebracao: 350ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duracao-transicao: 0ms;
    --duracao-celebracao: 0ms;
  }
}

@media (min-width: 600px) {
  :root {
    --tamanho-numero-heroi: 80px;
    --tamanho-h1: 30px;
  }
}

@media (min-width: 960px) {
  :root {
    --tamanho-numero-heroi: 84px;
    --espaco-epico: 96px;
  }
}