/* ============================================================
   DESIGN TOKENS — Línea gráfica oficial
   Fuente de verdad: docs/LINEA-GRAFICA.md
   Dark mode es el modo principal de la aplicación.
   ============================================================ */

:root {
  /* ---- Paleta principal ---- */
  --obsidian-black: #0D1012;
  --graphite: #1B2025;
  --bone-white: #F4F2ED;
  --performance-blue: #4B6FFF;
  --recovery-teal: #29C7B8;
  --activation-lime: #C7F36B; /* uso limitado: nunca como fondo principal */

  /* ---- Colores funcionales por módulo ---- */
  --module-movilidad: #4B6FFF;      /* Performance Blue */
  --module-activacion: #C7F36B;     /* Activation Lime */
  --module-estabilidad: #8A78F0;    /* Controlled Violet */
  --module-estiramientos: #D6C6AD;  /* Soft Sand */
  --module-recuperacion: #29C7B8;   /* Recovery Teal */
  --module-protocolos: #F2AE4D;     /* Warm Amber */
  --module-advertencia: #F16F61;    /* Controlled Coral — solo advertencias, dolor, restricciones */

  /* ---- Scores del test de movilidad ---- */
  --score-alto: #29C7B8;
  --score-medio: #F2AE4D;
  --score-bajo: #F16F61;

  /* ---- Superficies y variantes ad-hoc, ahora parte del sistema ---- */
  --coral-text: #F58B7F;        /* coral aclarado para contraste AA sobre fondo oscuro (texto de advertencia) */
  --teal-text: #6FE3D6;         /* teal aclarado para contraste AA sobre fondo oscuro (texto de confirmación) */
  --surface-player: #101418;    /* fondo del video en el player de sesión */
  --surface-recovery: #10171A;  /* fondo de la pantalla de recuperación */
  --backdrop: #07090A;          /* fondo detrás del marco de teléfono (prototipo) */

  /* ---- Gradientes (sutiles, nunca saturados) ---- */
  --gradient-principal: linear-gradient(135deg, #4B6FFF, #29C7B8);  /* hero, score, progreso, CTA destacado */
  --gradient-activacion: linear-gradient(135deg, #C7F36B, #29C7B8); /* pre-entreno, inicio de rutina */

  /* ---- Tipografía ---- */
  --font-display: 'Sora', system-ui, sans-serif; /* títulos, scores, métricas */
  --font-body: 'Inter', system-ui, sans-serif;   /* textos y datos */

  /* ---- Motion ---- */
  --ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1);    /* entradas y respuestas de UI */
  --ease-in-out-strong: cubic-bezier(0.77, 0, 0.175, 1); /* movimiento en pantalla */
}

/* ---- Tema oscuro (principal) ---- */
:root,
[data-theme="dark"] {
  --bg-primary: var(--obsidian-black);
  --bg-secondary: var(--graphite);
  --surface-card: var(--graphite);
  --text-primary: var(--bone-white);
  --text-secondary: rgba(244, 242, 237, 0.65);
  --accent-primary: var(--performance-blue);
  --accent-progress: var(--recovery-teal);
  --accent-energy: var(--activation-lime);
  --border-subtle: rgba(244, 242, 237, 0.08);
}

/* ---- Tema claro ---- */
/* app/index.html no lo usa (RANGO en producto es dark-only), pero
   design/styleguide.html sí tiene un toggle funcional que depende de esto. */
[data-theme="light"] {
  --bg-primary: var(--bone-white);
  --bg-secondary: #FFFFFF;
  --surface-card: #FFFFFF;
  --text-primary: var(--obsidian-black);
  --text-secondary: rgba(13, 16, 18, 0.65);
  --accent-primary: var(--performance-blue);
  --accent-progress: var(--recovery-teal);
  --accent-energy: var(--activation-lime);
  --border-subtle: rgba(13, 16, 18, 0.08);
}

/* ============================================================
   REDISEÑO 2026 — sistema de superficies, tipografía, espaciado
   Los tokens anteriores se conservan; estos se añaden encima.
   ============================================================ */
:root {
  /* Superficies por elevación */
  --surface-0: #0D1012;   /* fondo de pantalla */
  --surface-1: #14181C;   /* tarjeta en reposo */
  --surface-2: #1B2025;   /* tarjeta elevada / hero */
  --surface-3: #222831;   /* menús, hojas, estados activos */

  /* Líneas y brillos */
  --hairline: rgba(244, 242, 237, 0.08);
  --hairline-strong: rgba(244, 242, 237, 0.14);
  --inner-glow: inset 0 1px 0 rgba(244, 242, 237, 0.05);

  /* Texto (el secundario sube de contraste: antes llegaba a 0.4) */
  --text-1: #F4F2ED;
  --text-2: rgba(244, 242, 237, 0.72);
  --text-3: rgba(244, 242, 237, 0.56);

  /* Escala tipográfica */
  --fs-micro: 11px;
  --fs-sm: 13px;
  --fs-body: 15px;
  --fs-lg: 17px;
  --fs-title: 22px;
  --fs-screen: 30px;
  --fs-metric: 56px;

  /* Espaciado (múltiplos de 4) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;

  /* Radios */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* Elevación */
  --shadow-1: 0 2px 8px rgba(0, 0, 0, 0.28);
  --shadow-2: 0 10px 30px rgba(0, 0, 0, 0.45);

  /* Motion */
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 380ms;
}