/**
 * ds-tokens.css — os tokens do Design System do Vertix (Sprint 11, etapa 1).
 *
 * COMO ESTE ARQUIVO CONVIVE COM `tema.css`. Lá mora a MARCA: as cores que
 * mudam quando o treinador configura o branding, e só elas. Aqui mora todo o
 * resto — tipografia, espaço, raio, sombra, movimento, superfície, texto,
 * estado e as paletas de dado. Nenhum valor daqui muda com a marca, e nenhum
 * token de marca é redeclarado aqui: quando um componente precisa da cor de
 * ação, ele lê `var(--brand-primary)` direto. Duas cópias do azul divergem na
 * primeira edição, e `e2e/tema-tokens.spec.ts` já falha por isso.
 *
 * ORDEM DE CARGA nas telas:
 *   tema.css → ds-tokens.css → ds-componentes.css → <style> da própria tela
 *
 * TEMA ESCURO. O mecanismo é o que o app do aluno já usa: `data-tema="escuro"`
 * no `<html>`, gravado em `localStorage.vertix_tema`. O padrão é o claro;
 * quem escolheu escuro continua no escuro.
 *
 * AS QUATRO REGRAS que os tokens existem para garantir:
 *   1. Quatro níveis de texto, e só quatro: display, título, corpo, legenda.
 *   2. Espaço em múltiplos de 8 (4 e 12 só dentro de componente).
 *   3. Cor de estado nunca é cor de marca, e cor de dado nunca é cor de estado.
 *   4. Alvo de toque mínimo de 44px.
 */

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

:root {
  color-scheme: light;

  /* ---------------- tipografia ---------------- */
  --ds-fonte: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Display — números grandes e título de tela no celular. */
  --ds-display-tam: 34px;
  --ds-display-alt: 40px;
  --ds-display-peso: 600;
  --ds-display-esp: -0.02em;
  /* Título — cabeçalho de seção, título de folha. */
  --ds-titulo-tam: 20px;
  --ds-titulo-alt: 26px;
  --ds-titulo-peso: 600;
  --ds-titulo-esp: -0.01em;
  /* Corpo — texto corrido e rótulo de linha de lista (peso 500 para ênfase). */
  --ds-corpo-tam: 15px;
  --ds-corpo-alt: 22px;
  --ds-corpo-peso: 400;
  /* Legenda — texto de apoio, rótulo de campo, metadado. */
  --ds-legenda-tam: 13px;
  --ds-legenda-alt: 18px;
  --ds-legenda-peso: 500;

  /* ---------------- espaço (grade de 8pt) ---------------- */
  --ds-esp-1: 4px;   /* só dentro de componente */
  --ds-esp-2: 8px;
  --ds-esp-3: 12px;  /* só dentro de componente */
  --ds-esp-4: 16px;
  --ds-esp-6: 24px;
  --ds-esp-8: 32px;
  --ds-esp-10: 40px;
  --ds-esp-12: 48px;
  --ds-esp-16: 64px;
  --ds-margem-celular: 20px;
  --ds-alvo-toque: 44px;

  /* ---------------- raio ---------------- */
  --ds-raio-chip: 8px;
  --ds-raio-controle: 12px;
  --ds-raio-card: 20px;
  --ds-raio-folha: 28px;
  --ds-raio-pilula: 999px;

  /* ---------------- movimento ---------------- */
  --ds-dur-toque: 120ms;
  --ds-dur-base: 200ms;
  --ds-dur-folha: 320ms;
  --ds-curva: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* ---------------- superfície e texto (claro) ---------------- */
  --ds-fundo: #F5F6F8;
  --ds-superficie: #FFFFFF;
  --ds-superficie-2: #EEF0F4;
  --ds-superficie-3: #E3E7ED;
  --ds-linha: #E6E9EE;
  --ds-linha-forte: #D5DAE1;
  --ds-texto: #0B111C;
  --ds-texto-2: #586174;
  --ds-texto-3: #8C94A3;
  --ds-texto-sobre-cor: #FFFFFF;
  --ds-veu: rgba(8, 12, 18, 0.55);

  /* ---------------- sombra (só para o que flutua) ---------------- */
  --ds-sombra-0: 0 0 0 1px var(--ds-linha);
  --ds-sombra-1: 0 1px 2px rgba(15, 23, 42, 0.06), 0 0 0 1px var(--ds-linha);
  --ds-sombra-2: 0 12px 32px rgba(15, 23, 42, 0.14);

  /* ---------------- estado ----------------
     Significado, não identidade: não mudam com a marca. */
  --ds-sucesso: #16A34A;
  --ds-sucesso-suave: rgba(22, 163, 74, 0.10);
  --ds-aviso: #D97706;
  --ds-aviso-suave: rgba(217, 119, 6, 0.10);
  --ds-perigo: #DC2626;
  --ds-perigo-suave: rgba(220, 38, 38, 0.09);

  /* ---------------- dado ----------------
     Paletas categóricas: precisam ser distinguíveis entre si e das cores de
     estado. Aparecem como marcador ao lado de um rótulo, nunca sozinhas. */
  /* Modalidade: só Musculação e Cardio (Sprint 11.4). Tipos antigos de
     treino (corrida, natação, bike, mobilidade) são pintados como Cardio. */
  --ds-mod-musculacao: #8B7CF6;
  --ds-mod-cardio: #FB8A3C;
  --ds-agua: #0EA5E9;
  --ds-proteina: #DB2777;
  --ds-carboidrato: #C77800;
  --ds-gordura: #7048C4;
  /* Zonas de esforço Z1..Z5 do perfil de blocos. */
  --ds-zona-1: #D1D5DB;
  --ds-zona-2: #FDE047;
  --ds-zona-3: #FBBF24;
  --ds-zona-4: #F97316;
  --ds-zona-5: #DC2626;
}

[data-tema="escuro"] {
  color-scheme: dark;

  --ds-fundo: #07090C;
  --ds-superficie: #0F131A;
  --ds-superficie-2: #171C25;
  --ds-superficie-3: #202733;
  --ds-linha: #1E2531;
  --ds-linha-forte: #2B3340;
  --ds-texto: #F3F5F8;
  --ds-texto-2: #9AA3B3;
  --ds-texto-3: #6B7483;
  --ds-veu: rgba(0, 0, 0, 0.62);

  --ds-sombra-0: 0 0 0 1px var(--ds-linha);
  --ds-sombra-1: 0 0 0 1px var(--ds-linha);
  --ds-sombra-2: 0 12px 32px rgba(0, 0, 0, 0.5);

  --ds-sucesso: #34D399;
  --ds-sucesso-suave: rgba(52, 211, 153, 0.14);
  --ds-aviso: #F5B544;
  --ds-aviso-suave: rgba(245, 181, 68, 0.14);
  --ds-perigo: #F87171;
  --ds-perigo-suave: rgba(248, 113, 113, 0.14);

  --ds-agua: #38BDF8;
  --ds-proteina: #F472B6;
  --ds-carboidrato: #FBBF24;
  --ds-gordura: #A78BFA;
  --ds-zona-1: #4B5563;
}

/*
 * SUPERFÍCIE ESCURA FIXA. A gaveta do painel e o topo das telas de execução
 * são escuros nos dois temas, de propósito: é superfície, não marca (ver
 * "Cor da marca" no CLAUDE.md). Moram fora de `[data-tema]` porque não trocam.
 */
:root {
  --ds-fixo-fundo: #0B0F15;
  --ds-fixo-superficie: #141922;
  --ds-fixo-superficie-2: #1C222D;
  --ds-fixo-linha: rgba(255, 255, 255, 0.08);
  --ds-fixo-linha-forte: rgba(255, 255, 255, 0.16);
  --ds-fixo-texto: #F3F5F8;
  --ds-fixo-texto-2: #9AA3B3;
  --ds-fixo-texto-3: #6B7483;
}