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

   Tema em vigor: "Ferro" (design-system/DESIGN.md). Este arquivo é cópia
   de design-system/tokens.css: mude lá e copie para cá.
   ============================================================ */
:root{
  color-scheme:dark;

  /* ---------- superfícies: degraus de tom, sem borda ---------- */
  --fundo:#0F1317;
  --painel:#171C22;
  --elevado:#1F262E;       /* o que flutua e a barra do pé */
  --rebaixado:#0B0F12;
  --rebaixado-2:#252D36;   /* pílula, trilho, botão secundário */
  --lateral:#0F1317;
  --fio:#252D36;           /* divisão discreta dentro de um painel */
  --contorno:#5C6876;      /* só em campo de digitação: 3,2:1 no painel */

  /* ---------- texto ---------- */
  --tinta:#E8EDF2;
  --tinta-2:#94A1AE;       /* 6,4:1 no painel */

  /* ---------- ação ---------- */
  --acao:#5B95FF;
  --acao-hover:#78A8FF;
  --sobre-acao:#0F1317;
  --acao-suave:#1B2A44;

  /* ---------- dado: as anilhas continuam dizendo o que é cada macro ---------- */
  --prot:#F05A4F;
  --carb:#F2C33D;
  --gord:#3FBF72;
  --agua:#4FB3E8;
  --anilha-25:#E0443A; --anilha-20:#2F6FE0; --anilha-15:#E9B526; --anilha-10:#2E9E5B;
  --anilha-5:#E6E9EC;  --anilha-2:#2A2F36;  --anilha-1:#B8C0C8;

  /* ---------- estado ---------- */
  --ok:#4CC27A;      --ok-suave:#13291D;
  --atencao:#F0B44A; --atencao-suave:#2E2511;
  --erro:#FF6B63;    --erro-suave:#341819;

  /* ---------- figuras (anel, barra, halter, corpo) ---------- */
  --trilho-a:#06090B; --trilho-b:#252D36;
  --cubo-a:#2A323C;   --cubo-b:#171C22;
  --metal-a:#F2F5F8;  --metal-b:#9AA4AE; --metal-c:#4A535C;
  --luz:#FFFFFF;      /* brilho de borda e reflexo, sempre com transparência */
  --treva:#000000;    /* furo e sombra própria, sempre com transparência */
  --sombra-fig:rgb(0 0 0 / .6);

  /* ---------- profundidade: uma sombra, só no que flutua ---------- */
  --sombra:0 12px 32px rgb(0 0 0 / .45);
  --veu:rgb(5 8 10 / .72);

  /* ---------- tipo ---------- */
  --f-tela:"Archivo",system-ui,sans-serif;
  --f-num:"Archivo",system-ui,sans-serif;
  --f-logo:"Archivo",system-ui,sans-serif;   /* o nome MacroShape: 500 em "Macro", 700 em "Shape" */
  --num-peso:600;
  --num-larg:72%;          /* números condensados */
  --t-min:12px;            /* piso absoluto */
  --t-apoio:13px;
  --t-corpo:15px;
  --t-titulo:17px;
  --t-num-s:20px;          /* número de linha, macro */
  --t-num-m:26px;          /* água, número secundário */
  --t-num-l:34px;          /* balanço */
  --t-tela:28px;           /* título de tela; 32 no computador */
  --t-placar:54px;         /* o número principal; 64 no computador */
  --t-campo:16px;          /* campo de digitação: abaixo de 16 o iPhone dá zoom */

  /* ---------- espaço ---------- */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:24px; --e6:32px;

  /* ---------- medida ---------- */
  --alt-toque:44px;        /* botão, campo, alvo de toque */
  --alt-ic:44px;           /* botão redondo só de ícone; 38 no computador, onde não há toque */
  --alt-nav:68px;          /* barra do pé no celular */
  --larg-lateral:220px;
  --larg-max:1440px;       /* o conteúdo cresce até aqui */
  --r-painel:18px;
  --r-folha:20px;
  --r-item:14px;
  --r-controle:12px;
  --r-pilula:999px;
  --traco-foco:2px;
  --fio-esp:1px;            /* espessura da linha divisória */
  --vao:2px;                /* fresta entre partes de uma barra */
  --anel-dia-pc:170px;      /* anel do placar no computador */
  --barra-fina:6px;         /* barra de proporção dos macros */
  --barra-media:10px;       /* barras do balanço */
  --ico:18px;               /* ícone de botão e do menu */
  --ico-nav:22px;           /* ícone da barra do pé */
  --larg-balao:260px;       /* balão do "i" */
  --larg-folha:560px;       /* folha no computador */
  --larg-silhueta:460px;    /* figura do Corpo: acima disto o texto dos anéis cresce demais */

  /* ---------- movimento ---------- */
  --dur:140ms;             /* hover e foco */
  --dur-2:220ms;           /* pílula e folha */
  --ease:cubic-bezier(.2,.8,.2,1);
}
@media (prefers-reduced-motion:reduce){ :root{ --dur:0ms; --dur-2:0ms; } }
@media (min-width:900px){ :root{ --t-tela:32px; --t-placar:64px; --alt-ic:38px; } }