/* ==================================================================
   SPORTFIT2PRO — TOKENS / DESIGN SYSTEM (Fase 0)
   ------------------------------------------------------------------
   Fuente ÚNICA de verdad de la marca. Se carga ANTES de custom.css
   para que custom.css consuma estos tokens (var(--sf-*)).

   Paleta corporativa (manual de marca Sportfit2pro):
     Profesionalismo          #000000
     Prosperidad y equilibrio #013E2C
     Crecimiento              #007459
     Vitalidad y bienestar    #03FE94
     Perfección               #FFFFFF

   Con esto se unifica la marca entre la landing/login (que ya usaban
   esta paleta) y el resto de la app autenticada (que usaba azul/verde).
   ================================================================== */
:root{
  /* --- Marca --- */
  --sf-black:#000000;
  --sf-deep:#013E2C;
  --sf-forest:#007459;
  --sf-mint:#03FE94;
  --sf-white:#FFFFFF;
  --sf-mist:#F3F8F6;
  --sf-slate:#5B6D66;
  --sf-slate-2:#9DB0AA;
  --sf-line-dark:rgba(255,255,255,.14);
  --sf-line-light:rgba(1,62,44,.12);

  /* Anillo de foco / sombras de marca */
  --sf-focus:rgba(3,254,148,.45);
  --sf-shadow-brand:rgba(1,62,44,.18);

  /* --- Tipografía --- */
  --sf-font-base:'Inter', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --sf-font-display:'Big Shoulders Display', system-ui, sans-serif;
  --sf-font-mono:'IBM Plex Mono', ui-monospace, monospace;
}

/* ------------------------------------------------------------------
   Accesibilidad base (antes solo existía en la landing pública)
   ------------------------------------------------------------------ */

/* Foco visible global y coherente para navegación por teclado */
:focus-visible{
  outline:2px solid var(--sf-forest);
  outline-offset:2px;
}

/* Skip-to-content: primer elemento tabulable, oculto hasta recibir foco */
.skip-link{
  position:absolute;
  left:-999px;
  top:0;
  z-index:3000;
  background:var(--sf-deep);
  color:#fff;
  font-weight:600;
  padding:.6rem 1rem;
  border-radius:0 0 8px 0;
  text-decoration:none;
}
.skip-link:focus{
  left:0;
}

/* Respeta "movimiento reducido" del sistema (Fase 5).
   custom.css tiene muchas animaciones/transiciones (hover con transform,
   countUp, slideInCard, pulse-sport infinito, shimmer…); aquí se neutralizan
   para usuarios con esa preferencia. El !important gana sin importar el orden. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}