/* Design system do treino-hub, versão 2. Regra do projeto: o ÚNICO lugar com cor escrita direto é este arquivo.
   O resto (componentes.css, telas) só usa estes tokens. Cada token está documentado em /design/ (o teste-ds confere).
   Cinza: Slate (Radix Colors). A marca do personal é UM token (--marca), preenchido por app.js a partir de /marca.json.
   Tema: claro por padrão. Escuro com data-theme="dark"; data-theme="auto" segue o aparelho. */

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

:root{
  /* Cinza (Slate) */
  --cinza-1:#fcfcfd; --cinza-2:#f9f9fb; --cinza-3:#f0f0f3; --cinza-4:#e8e8ec; --cinza-5:#e0e1e6; --cinza-6:#d9d9e0;
  --cinza-8:#b9bbc6; --cinza-9:#8b8d98; --cinza-11:#60646c; --cinza-12:#1c2024;
  /* Superfícies e texto. REGRA: o fundo da página é sempre o cinza claríssimo neutro (cinza-2), nunca tingido pela marca; a cor vive nos botões, etiquetas e destaques. */
  --fundo:var(--cinza-2); --superficie:#ffffff; --texto:var(--cinza-12); --texto-2:var(--cinza-11); --texto-3:var(--cinza-9);
  --linha:var(--cinza-4); --linha-forte:var(--cinza-6); --campo:color-mix(in srgb,var(--cinza-5) 50%,transparent); --foco:var(--cinza-8);
  /* Marca (o coach troca só --marca; o resto deriva dela) */
  --marca:#1A66F5; --sobre-marca:#ffffff;
  --tinta-marca:24%;      /* força do tom da marca nos fundos suaves (botão suave, etiqueta): maior = mais vivo */
  --marca-fundo:color-mix(in oklch,var(--marca) var(--tinta-marca),var(--superficie));
  --marca-borda:color-mix(in oklch,var(--marca) 60%,var(--superficie));
  --marca-texto:color-mix(in oklch,var(--marca) 50%,#000000);
  /* Estados */
  --ok-fundo:#c8f5dc; --ok:#12b76a; --ok-texto:#05603a;
  --erro-fundo:#ffd9e2; --erro:#f43f5e; --erro-texto:#b4093a;
  --atencao-fundo:#ffe9a8; --atencao-texto:#8a4a00;
  --info-fundo:#cfe6ff; --info:#2e90fa; --info-texto:#1559c7;
  --branco:#ffffff;       /* texto sobre fundo colorido forte (visto da série, etiqueta sólida) */
  --preto:#111111;        /* texto sobre marca clara (calculado por app.js) */
  /* Raios (identidade Radix Themes): cards 12, controles 8, etiquetas 6, itens pequenos 6, pílula */
  --raio-grande:12px; --raio-medio:10px; --raio-card:8px; --raio-chip:6px; --raio-pequeno:6px; --raio-pilula:999px;
  /* Sombras: card com contorno fino e sombra leve (a cor vem do texto, serve nos dois temas) */
  --sombra-card:0 0 0 1px var(--linha),0 1px 2px color-mix(in srgb,var(--texto) 6%,transparent);
  --sombra-flutuante:0 8px 24px rgb(0 0 0 / .16);
  --sombra-fundo-folha:rgb(0 0 0 / .45);
  /* Tipografia: Geist; títulos 600 com letras levemente juntas; botões e rótulos 500; números tabulares */
  --fonte-texto:'Geist',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --tam-xs:11px; --tam-sm:12px; --tam-base:14px; --tam-lg:15px; --tam-xl:16px; --tam-2xl:20px; --tam-3xl:26px;
  --tam-entrada:16px;     /* campos de digitar: nunca menos de 16 px, senão o iPhone dá zoom ao tocar */
  --peso-normal:400; --peso-medio:500; --peso-forte:600;
  --altura-linha:1.45; --altura-linha-titulo:1.2; --espaco-titulo:-.4px;
  /* Espaços (múltiplos de 4) */
  --esp-1:4px; --esp-2:8px; --esp-3:12px; --esp-4:16px; --esp-5:20px; --esp-6:24px; --esp-8:32px;
  /* Movimento "sutil": rápido, sobe pouco. Tudo respeita prefers-reduced-motion (no fim deste arquivo). */
  --dur:160ms; --dur-lento:240ms; --ease:cubic-bezier(.25,.1,.25,1); --desl:4px;
  /* Toque e foco */
  --alvo:44px;            /* tamanho mínimo de qualquer coisa que se toca com o dedo (mínimo da Apple) */
  --anel-foco:0 0 0 2px var(--marca);
  color-scheme:light;
}

/* Escuro: escolhido pela pessoa (data-theme="dark"), ou o do aparelho quando data-theme="auto". */
:root[data-theme="dark"]{
  --cinza-1:#111113; --cinza-2:#18191b; --cinza-3:#212225; --cinza-4:#272a2d; --cinza-5:#2e3135; --cinza-6:#363a3f;
  --cinza-8:#5a6169; --cinza-9:#696e77; --cinza-11:#b0b4ba; --cinza-12:#edeef0;
  --fundo:var(--cinza-1); --superficie:var(--cinza-2);
  --tinta-marca:34%;
  --marca-fundo:color-mix(in oklch,var(--marca) var(--tinta-marca),var(--superficie));
  --marca-texto:color-mix(in oklch,var(--marca) 50%,#ffffff);
  --ok-fundo:color-mix(in srgb,#22e08a 24%,var(--superficie)); --ok:#22e08a; --ok-texto:#6df0ae;
  --erro-fundo:color-mix(in srgb,#ff5c7c 26%,var(--superficie)); --erro:#ff5c7c; --erro-texto:#ff9db1;
  --atencao-fundo:color-mix(in srgb,#ffc233 24%,var(--superficie)); --atencao-texto:#ffd25e;
  --info-fundo:color-mix(in srgb,#4da3ff 26%,var(--superficie)); --info:#4da3ff; --info-texto:#8cc4ff;
  --sombra-flutuante:0 8px 24px rgb(0 0 0 / .5);
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){ :root[data-theme="auto"]{
  --cinza-1:#111113; --cinza-2:#18191b; --cinza-3:#212225; --cinza-4:#272a2d; --cinza-5:#2e3135; --cinza-6:#363a3f;
  --cinza-8:#5a6169; --cinza-9:#696e77; --cinza-11:#b0b4ba; --cinza-12:#edeef0;
  --fundo:var(--cinza-1); --superficie:var(--cinza-2);
  --tinta-marca:34%;
  --marca-fundo:color-mix(in oklch,var(--marca) var(--tinta-marca),var(--superficie));
  --marca-texto:color-mix(in oklch,var(--marca) 50%,#ffffff);
  --ok-fundo:color-mix(in srgb,#22e08a 24%,var(--superficie)); --ok:#22e08a; --ok-texto:#6df0ae;
  --erro-fundo:color-mix(in srgb,#ff5c7c 26%,var(--superficie)); --erro:#ff5c7c; --erro-texto:#ff9db1;
  --atencao-fundo:color-mix(in srgb,#ffc233 24%,var(--superficie)); --atencao-texto:#ffd25e;
  --info-fundo:color-mix(in srgb,#4da3ff 26%,var(--superficie)); --info:#4da3ff; --info-texto:#8cc4ff;
  --sombra-flutuante:0 8px 24px rgb(0 0 0 / .5);
  color-scheme:dark;
}}

[hidden]{display:none!important;}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important;}}