/* Design system do treino-hub. Único lugar com cor escrita direto: o resto usa estes tokens.
   Cinza: Slate (Radix Colors). A marca do personal é UM token (--marca), preenchido por app.js a partir de /marca.json. */
:root{
  --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;
  --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:#E5484D; --sobre-marca:#ffffff;
  --marca-fundo:color-mix(in oklch,var(--marca) 9%,var(--superficie));
  --marca-borda:color-mix(in oklch,var(--marca) 45%,var(--superficie));
  --marca-texto:color-mix(in oklch,var(--marca) 70%,#000000);
  --ok-fundo:#ddf6e6; --ok:#1fa463; --ok-texto:#177b4a;
  --erro-fundo:#ffe3ec; --erro:#e8457b; --erro-texto:#ca1954;
  --atencao-fundo:#fff1cc; --atencao-texto:#946200;
  --raio-grande:24px; --raio-medio:16px; --raio-card:12px; --raio-pequeno:10px; --raio-pilula:999px;
  --sombra-card:0 0 0 1px rgb(28 32 36 / .05),0 1px 3px rgb(0 0 0 / .08);
  --fonte-texto:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --tam-xs:12px; --tam-sm:14px; --tam-base:16px; --tam-lg:18px; --tam-xl:20px; --tam-2xl:24px;
  --peso-normal:400; --peso-medio:500; --peso-forte:600;
  --alvo:48px;            /* tamanho mínimo de qualquer coisa que se toca com o dedo */
  color-scheme:light;
}
@media (prefers-color-scheme:dark){ :root:where(:not([data-theme="light"])){
  --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);
  --marca-fundo:color-mix(in oklch,var(--marca) 16%,var(--superficie));
  --marca-texto:color-mix(in oklch,var(--marca) 70%,#ffffff);
  --ok-fundo:color-mix(in srgb,#4ade80 18%,var(--superficie)); --ok:#4ade80; --ok-texto:#86efac;
  --erro-fundo:color-mix(in srgb,#fb7185 18%,var(--superficie)); --erro:#fb7185; --erro-texto:#fda4af;
  --atencao-fundo:color-mix(in srgb,#fbbf24 16%,var(--superficie)); --atencao-texto:#fcd34d;
  --sombra-card:0 0 0 1px rgb(255 255 255 / .06),0 1px 2px rgb(0 0 0 / .4);
  color-scheme:dark;
}}
:root:where([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);
  --marca-fundo:color-mix(in oklch,var(--marca) 16%,var(--superficie));
  --marca-texto:color-mix(in oklch,var(--marca) 70%,#ffffff);
  --ok-fundo:color-mix(in srgb,#4ade80 18%,var(--superficie)); --ok:#4ade80; --ok-texto:#86efac;
  --erro-fundo:color-mix(in srgb,#fb7185 18%,var(--superficie)); --erro:#fb7185; --erro-texto:#fda4af;
  --atencao-fundo:color-mix(in srgb,#fbbf24 16%,var(--superficie)); --atencao-texto:#fcd34d;
  --sombra-card:0 0 0 1px rgb(255 255 255 / .06),0 1px 2px rgb(0 0 0 / .4);
  color-scheme:dark;
}
[hidden]{display:none!important;}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;}}