/* NORTE — sistema de diseño.
 *
 * Dirección: alto contraste, tipografía masiva, energía. Sin fotografía ni
 * fuentes externas: la CSP bloquea otros orígenes y la PWA funciona offline,
 * así que el impacto se construye con tipo, color y geometría.
 *
 * Los dos retos comparten sistema pero NO se parecen:
 *   Military → casi negro + volt. Angular, ruidoso, deportivo.
 *   Mom      → crema + terracota. Curvo, cálido, sereno.
 */

:root {
  /* --- Tipografía ---
     Sin webfonts. El carácter se consigue con peso 800/900, tracking negativo
     agresivo y escala muy contrastada, no con una fuente de marca. */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-display: var(--font-sans);
  --font-mono: ui-monospace, "SF Mono", "Roboto Mono", Menlo, monospace;

  /* Escala fluida. Se comprimió: los titulares de la aplicación ocupaban media
     pantalla en móvil y empujaban el contenido fuera de la vista. El landing
     conserva los tamaños grandes —ahí el titular SÍ es el mensaje— con
     `--text-4xl` y `--text-mega`, que solo usa él.

     `--text-base` se queda en 1rem y no baja: por debajo de 16 px, iOS hace
     zoom automático al enfocar un campo, que es justo el comportamiento de
     "página web" que se quitó hace dos commits. */
  --text-xs: 0.6875rem;
  --text-sm: 0.75rem;
  --text-base: 1rem;
  --text-lg: 1.0625rem;
  --text-xl: 1.1875rem;
  --text-2xl: clamp(1.375rem, 4.5vw, 1.625rem);
  --text-3xl: clamp(1.75rem, 6.5vw, 2.125rem);
  --text-4xl: clamp(3.5rem, 17vw, 5.5rem);
  --text-mega: clamp(5rem, 26vw, 9rem);

  --leading-tight: 0.92;
  --leading-snug: 1.15;
  --leading-normal: 1.55;

  /* El tracking negativo en tamaños grandes es lo que da aire deportivo;
     el positivo en las etiquetas pequeñas, lo que las hace legibles. */
  --tracking-mega: -0.045em;
  --tracking-tight: -0.025em;
  --tracking-label: 0.14em;

  --weight-regular: 400;
  --weight-medium: 600;
  --weight-bold: 800;
  --weight-black: 900;

  /* --- Espaciado ---
     Dos mitades con criterios opuestos, y confundirlas fue el error de la
     primera pasada de compactación:

     1–4 son el espacio DENTRO de un componente —el relleno de un botón, el
     hueco entre una etiqueta y su campo. Ahí apretar es lo que se pedía.

     5–9 separan bloques ENTRE sí. Ahí apretar hizo que un título de sección
     quedara pegado al botón de la tarjeta anterior y pareciera pertenecerle.
     Vuelven a sus valores anteriores: el aire entre secciones es lo que deja
     leer la página de un vistazo. */
  --space-1: 0.25rem;
  --space-2: 0.375rem;
  --space-3: 0.5rem;
  --space-4: 0.75rem;
  --space-5: 1.25rem;
  --space-6: 2rem;
  --space-7: 2.75rem;
  --space-8: 3.5rem;
  --space-9: 5rem;

  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.08);
  --shadow-md: 0 8px 24px rgb(0 0 0 / 0.12);
  --shadow-lg: 0 24px 60px rgb(0 0 0 / 0.28);
  --shadow-glow: 0 0 0 0 transparent;

  --color-success: #17a673;
  --color-warning: #c98a12;
  --color-danger: #e0413c;

  /* Neutro por defecto (landing y autenticación): oscuro, para que la marca
     tenga presencia desde la primera pantalla. */
  --surface-page: #0b0d10;
  --surface-card: #14171c;
  --surface-raised: #1c2027;
  --surface-sunken: #07090b;
  --border-subtle: #262b33;
  --border-strong: #3a414c;

  --text-primary: #f4f6f8;
  --text-secondary: #8d97a5;
  --text-inverse: #0b0d10;

  --accent: #d8ff3e;
  --accent-strong: #b8e01f;
  --accent-contrast: #0b0d10;
  --accent-soft: #1e2610;

  /* Campos de color a sangre. Sustituyen a la fotografía que no podemos servir. */
  --hero-gradient: radial-gradient(120% 120% at 15% 0%, #1d2430 0%, #0b0d10 55%);
  --accent-gradient: linear-gradient(135deg, #d8ff3e 0%, #7ff0a0 100%);

  --container-max: 1100px;
  --content-max: 62ch;
  /* 44 px es el mínimo que recomiendan Apple y las pautas de accesibilidad, y
     no baja de ahí por mucho que se compacte el resto: esto se usa con prisa,
     de noche y con una mano. Lo que se reduce es el relleno y la letra, no el
     área que hay que acertar. */
  --touch-min: 44px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 140ms;
  --duration-base: 280ms;
  --duration-slow: 520ms;
}

/* ---------- MILITARY 30 ----------
   Casi negro y volt. Ángulos duros, etiquetas en mayúscula, densidad alta. */
[data-theme="military"] {
  --surface-page: #08090b;
  --surface-card: #101318;
  --surface-raised: #191d24;
  --surface-sunken: #050607;
  --border-subtle: #21262e;
  --border-strong: #39414d;

  --text-primary: #f6f8fa;
  --text-secondary: #858f9d;

  --accent: #d8ff3e;
  --accent-strong: #c2ec14;
  --accent-contrast: #08090b;
  --accent-soft: #1d2410;

  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 14px;

  --hero-gradient:
    radial-gradient(90% 70% at 100% 0%, rgb(216 255 62 / 0.16) 0%, transparent 60%),
    radial-gradient(120% 120% at 0% 100%, #161b22 0%, #08090b 60%);
  --accent-gradient: linear-gradient(120deg, #d8ff3e 0%, #a8f000 100%);
  --shadow-glow: 0 0 40px -8px rgb(216 255 62 / 0.45);
}

/* ---------- MOM 30 ----------
   Crema y terracota. Curvas amplias, respiración, cero agresividad. */
[data-theme="mom"] {
  --surface-page: #fbf6f2;
  --surface-card: #ffffff;
  --surface-raised: #f5ece5;
  --surface-sunken: #f0e4da;
  --border-subtle: #e8d9cd;
  --border-strong: #d3bcaa;

  --text-primary: #2a1f1b;
  --text-secondary: #8a736a;
  --text-inverse: #ffffff;

  --accent: #c25a3f;
  --accent-strong: #a34630;
  --accent-contrast: #ffffff;
  --accent-soft: #f7e4dc;

  --radius-md: 16px;
  --radius-lg: 26px;
  --radius-xl: 36px;

  --tracking-mega: -0.03em;
  --leading-tight: 1.0;

  --hero-gradient:
    radial-gradient(85% 70% at 90% 0%, #f9ded1 0%, transparent 55%),
    radial-gradient(100% 100% at 0% 100%, #fdf3ec 0%, #fbf6f2 60%);
  --accent-gradient: linear-gradient(120deg, #c25a3f 0%, #e08a5c 100%);
  --shadow-lg: 0 24px 60px rgb(122 84 66 / 0.14);
  --shadow-glow: 0 0 32px -10px rgb(194 90 63 / 0.35);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Ajustes tipográficos de MOM ----------
   Military grita en mayúscula; Mom no debería. Las mayúsculas con tracking
   ancho son un gesto deportivo, y en un producto de acompañamiento durante el
   embarazo suenan a orden. Se suavizan aquí y no en cada componente. */
[data-theme="mom"] .btn-lg,
[data-theme="mom"] .hero-title,
[data-theme="mom"] .runner-exercise,
[data-theme="mom"] .challenge-title {
  text-transform: none;
  letter-spacing: var(--tracking-tight);
}

[data-theme="mom"] .day-hero-sub,
[data-theme="mom"] .meta-label {
  text-transform: none;
  letter-spacing: 0.02em;
  font-weight: var(--weight-medium);
}

/* El número del día en Mom no necesita el peso máximo: acompaña, no impone. */
[data-theme="mom"] .mega { font-weight: var(--weight-bold); }

/* Y las tarjetas respiran más: el aire es parte del tono. */
[data-theme="mom"] .card,
[data-theme="mom"] .card-hero { padding: var(--space-6); }