/* ============================================================
   tokens.css — fonte única de cor, tipo, espaço e medida.
   Leia o DESIGN.md antes de mudar qualquer valor aqui.

   Três camadas:
     1. base       a escala bruta. NUNCA usada direto num componente.
     2. funcional  o papel de cada valor (fundo, tinta, ação…). É o que o CSS usa.
     3. componente só quando um componente precisa de um valor que não é papel geral.

   Tema em vigor: "Aço", escolhido em 13/10/2026 para o dieta-treino
   (MuscleGoal), no lugar do "Preto no branco" de 09/10. Os outros projetos só adotam depois de mockup aprovado;
   quando adotarem outro tema, ele redefine as camadas 1 e 2 e mantém
   os nomes da camada 2.
   ============================================================ */

:root{
  /* ---------- 1. base ---------- */
  --branco:#FFFFFF;
  --aco-900:#131A22;     /* tinta: aço escuro, quase preto azulado */
  --aco-800:#17222E;     /* ferro: lateral e placar */
  --aco-700:#24323F;     /* ferro, um degrau acima: divisória e item ativo sobre o ferro */
  --aco-600:#34465A;     /* hover da tinta */
  --aco-500:#55606C;     /* texto de apoio: 5,4:1 no fundo, 6,4:1 no branco */
  --aco-300:#9FACB9;     /* texto de apoio sobre o ferro: 7:1 */
  --aco-200:#C9CFD6;     /* fio leve entre linhas. Não serve para texto nem para borda de campo */
  --aco-100:#DDE2E7;     /* superfície rebaixada, faixa de grupo, esqueleto */
  --aco-50:#E9ECEF;      /* fundo de página */
  --giz:#EEF1F4;         /* texto sobre o ferro */

  /* as cores oficiais das anilhas de levantamento. São dado e ação, nunca enfeite. */
  --anilha-25:#D4322C;   /* vermelha */
  --anilha-20:#2463C4;   /* azul: 5,6:1 com branco */
  --anilha-20-forte:#1B4E9E;
  --anilha-15:#F2C12E;   /* amarela: só como preenchimento, nunca como texto */
  --anilha-10:#1F8F4E;   /* verde */

  --verde-700:#17663F;   --verde-100:#DCECDD;
  --ambar-700:#7A5200;   --ambar-100:#F6E4B0;
  --vermelho-700:#B3261E; --vermelho-100:#F7DBD6;

  /* ---------- 2. funcional: cor ---------- */
  --fundo:var(--aco-50);
  --superficie:var(--branco);
  --superficie-2:var(--aco-100);
  --tinta:var(--aco-900);
  --tinta-2:var(--aco-500);
  --fio:var(--aco-900);          /* traço estrutural: abre bloco, cabeçalho de tabela */
  --fio-leve:var(--aco-200);   /* separa linhas de uma lista */
  --borda-campo:var(--aco-900);    /* contorno de controle: 3:1 no mínimo */

  /* ação e meta: o azul da anilha de 20 kg */
  --acao:var(--anilha-20);
  --acao-forte:var(--anilha-20-forte); /* hover e pressionado */
  --sobre-acao:var(--branco);
  --acao-suave:var(--aco-100);
  --foco:var(--anilha-20);
  --meta:var(--anilha-20);       /* linha da meta, alvo da anilha, item ativo do menu */
  --tinta-forte:var(--aco-600);  /* hover do que é invertido (fundo de tinta) */

  /* ferro: a lateral e o placar */
  --ferro:var(--aco-800);
  --ferro-2:var(--aco-700);
  --sobre-ferro:var(--giz);
  --sobre-ferro-2:var(--aco-300);

  /* dado: cada macro e a água têm a cor de uma anilha */
  --cor-proteina:var(--anilha-25);
  --cor-carbo:var(--anilha-15);
  --cor-gordura:var(--anilha-10);
  --cor-agua:var(--anilha-20);

  /* estado: as únicas cores do sistema. Nunca decoração, nunca marca. */
  --ok:var(--verde-700);         --ok-suave:var(--verde-100);
  --atencao:var(--ambar-700);    --atencao-suave:var(--ambar-100);
  --erro:var(--vermelho-700);    --erro-suave:var(--vermelho-100);
  --sobre-erro:var(--branco);

  --veu:rgba(19,26,34,.6);      /* fundo atrás de diálogo */

  /* ---------- 2. funcional: tipo ---------- */
  --f-logo:"Cabinet Grotesk","Arial Black","Segoe UI",sans-serif;          /* só a palavra MuscleGoal */
  --f-marca:"Big Shoulders Display","Arial Narrow","Segoe UI",sans-serif;  /* títulos e números de placar */
  --f-tela:"Switzer","Segoe UI",system-ui,sans-serif;
  --f-num:"Switzer","Segoe UI",system-ui,sans-serif;                       /* número em tabela: a fonte de tela, com algarismos alinhados */

  /* escala: só estes tamanhos. 12 é o piso. */
  --t-min:12px;        /* selo, ajuda de campo, detalhe de tabela */
  --t-apoio:13px;      /* texto secundário, rótulo de métrica */
  --t-rotulo:13px;     /* rótulo de campo */
  --t-corpo:14px;      /* texto padrão, controles */
  --t-titulo:16px;     /* título de estado vazio pequeno, valor de linha */
  --t-secao:22px;      /* título de bloco (h2) */
  --t-tela:30px;       /* título de tela (h1) */
  --t-metrica:64px;    /* o número principal da tela. Um por tela. */
  --t-metrica-2:34px;  /* números secundários ao lado dele */

  /* pesos: só os carregados. 800 é exclusivo da fonte de marca. */
  --p-normal:400;
  --p-medio:500;       /* nome de item, botão secundário */
  --p-forte:600;       /* rótulo, botão, valor */
  --p-negrito:700;     /* cabeçalho de tabela */
  --p-marca:800;

  --al-corpo:1.4;      /* altura de linha do texto */
  --al-titulo:1.1;
  --al-metrica:.95;
  --et-marca:.01em;    /* entreletra dos títulos e números de placar */
  --et-logo:-.04em;    /* entreletra da palavra MuscleGoal */
  --et-metrica:0em;

  /* ---------- 2. funcional: espaço ---------- */
  /* dentro do componente */
  --e1:4px;  --e2:8px;  --e3:12px;
  /* entre componentes de um bloco */
  --e4:16px; --e5:24px;
  /* entre blocos */
  --e6:32px;

  /* ---------- 2. funcional: medida ---------- */
  --alt-controle:36px;     /* botão, campo: alvo de toque */
  --alt-controle-p:28px;   /* botão pequeno, chip */
  --alt-linha:46px;        /* linha de lista e de tabela, duas linhas de texto */
  --alt-linha-c:34px;      /* linha compacta, uma linha de texto */
  --alt-trilho:10px;       /* barra de progresso */
  --alt-trilho-fino:8px;   /* barra secundária (macros) */
  --larg-conteudo:1600px;    /* teto da página; abaixo dele o conteúdo ocupa a janela */
  --larg-lateral:216px;     /* menu lateral */
  --larg-painel:380px;      /* coluna lateral do diário */

  --traco-leve:1px;        /* fio entre linhas */
  --traco:2px;             /* contorno de controle, moldura */
  --traco-forte:3px;       /* abre bloco, filete de estado */
  --traco-foco:3px;
  --raio:0px;
  --traco-icone:2;         /* stroke-width dos ícones, em grade de 24 */

  --sombra:none;                               /* nada tem sombra… */
  --sombra-flutua:0 0 0 var(--traco) var(--tinta); /* …o que flutua ganha moldura */
  /* profundidade: só nestes dois níveis (DESIGN.md, "Profundidade") */
  --sombra-barra:none;
  --sombra-dado:none;

  --dur:120ms;             /* única duração de transição */
}

/* ------------------------------------------------------------
   Tema escuro — DEFINIDO, NÃO VALIDADO EM TELA.
   Só entra por escolha explícita (data-tema="escuro" no <html>),
   nunca sozinho pela preferência do sistema, até ser revisado.
   A regra é a mesma: inverter os papéis, não criar regras novas.
   ------------------------------------------------------------ */
:root[data-tema="escuro"]{
  --fundo:#1B1E22;
  --superficie:#262A2F;
  --superficie-2:#30353B;
  --tinta:#EEEDE8;
  --tinta-2:#A4A9B0;
  --fio:#EEEDE8;
  --fio-leve:#363B42;
  --borda-campo:#EEEDE8;
  --acao:var(--anilha-15);
  --acao-forte:#D9AB1F;
  --sobre-acao:#16181B;
  --acao-suave:#30353B;
  --foco:var(--anilha-15);
  --meta:var(--anilha-15);
  --tinta-forte:#CFCEC8;
  --ferro:#0F1113; --ferro-2:#262A2F;
  --ok:#7FCFA0;       --ok-suave:#17301F;
  --atencao:#E5B95A;  --atencao-suave:#33270A;
  --erro:#F0857C;     --erro-suave:#3A1512;
  --sobre-erro:#111111;
  --veu:rgba(0,0,0,.7);
}

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

/* No celular o texto e os controles voltam ao tamanho de toque: campo com
   menos de 16 px faz o iPhone dar zoom ao focar, e alvo de toque pede 44 px. */
@media (max-width:760px){
  :root{ --t-corpo:16px; --t-rotulo:14px; --t-titulo:17px; --t-tela:28px; --t-metrica:52px; --t-metrica-2:28px;
         --alt-controle:44px; --alt-controle-p:32px; --alt-linha:56px; --alt-linha-c:44px; }
}