/* ============================================================
   WolfnAnalytics V5 — type-scale.css
   SSOT de la escala tipográfica (SOP-667 §6.2/§6.4).

   POR QUÉ ESTE ARCHIVO EXISTE Y NO VIVE EN tokens.css
   ---------------------------------------------------
   La escala nació dentro de tokens.css, pero tokens.css además trae el chrome
   compartido: body, topbar, scrollbars, ::selection. Siete páginas del sitio
   —landing, login, profile, terms, privacy, disclaimer, clarity— tienen diseño
   propio y NO linkean tokens.css justamente para no heredar ese chrome.

   Resultado: esas 7 páginas usaban var(--fs-*) sin que las variables existieran.
   Una custom property inexistente vuelve inválida la declaración y el navegador
   HEREDA el tamaño del ancestro — todo caía a 16px. Eran 102 declaraciones rotas,
   48 de ellas en clarity.html y 28 en landing.html, sin un solo error en consola.
   (Auditoría: docs/audits/AUDITORIA_SOP667_IMPLEMENTACION_2026-08-17.md, defecto 1.)

   Separando la escala en su propio archivo, las 17 páginas pueden tener la
   tipografía sin verse obligadas a comerse el chrome. Una sola definición, cero
   duplicación: si mañana la escala cambia, se cambia acá y en ningún otro lado.

   ORDEN DE CARGA: este archivo va ANTES del <style> propio de cada página, para
   que las reglas de la página puedan sobrescribirlo si lo necesitan.
   ============================================================ */

/* Raíz del rem. Todas las variables de abajo se calculan sobre este valor.

   POR QUÉ 100% Y NO 16px
   ----------------------
   Antes decía `font-size: 16px`. Parece equivalente —el default de todo navegador
   es 16px— pero NO lo es, y la diferencia anula el motivo por el que existe este
   archivo.

   La preferencia de "tamaño de fuente" del navegador actúa sobre el valor inicial
   del elemento raíz. Una regla explícita en la hoja de estilos GANA sobre ese
   valor inicial. Con `16px` fijo, un usuario que configura su navegador en 20px o
   24px porque no ve bien sigue viendo 16px: la preferencia queda anulada.

   `100%` significa "el default del usuario, sea cual sea". En un navegador sin
   tocar da exactamente 16px —o sea, no cambia nada para la mayoría— pero si el
   usuario lo subió, toda la escala --fs-* acompaña.

   Esto es literalmente el objetivo del hallazgo F-05 de la auditoría de
   legibilidad y de §6.4 del SOP-667: convertir la escala a rem servía para que
   esa perilla funcionara. Con `16px` la conversión quedaba hecha pero desactivada.
   (Auditoría: docs/audits/AUDITORIA_SOP667_IMPLEMENTACION_2026-08-17.md, defecto 2.)

   Verificación: subir la fuente por defecto del navegador de 16 a 24px y confirmar
   que el texto del sitio escala. Con `16px` esa prueba falla; con `100%` pasa. */
html { font-size: 100%; }

:root {
  /* --------------------------------------------------------------------------
     1. ESCALA DE TAMAÑOS (--fs-*)
     Jerarquía modular calibrada (Pasos mínimos de 2px a 8px sin solapes de 1px)
     -------------------------------------------------------------------------- */
  --fs-label:   0.6875rem; /* 11px — Chips diminutos, timestamps, ejes de gráficos */
  --fs-xs:      0.75rem;   /* 12px — Metadatos secundarios, leyendas de tablas */
  --fs-sm:      0.9375rem; /* 15px — Decisión usuario */
  --fs-base:    1rem;      /* 16px — CUERPO GENERAL DE UI (Estándar Web) */
  --fs-md:      1.125rem;  /* 18px — Subtítulos destacados, tarjetas medianas (H4) */
  --fs-lg:      1.25rem;   /* 20px — Encabezados principales de tarjetas (H3) */
  --fs-xl:      1.5rem;    /* 24px — Números destacados, subtítulos H2 */
  --fs-2xl:     1.75rem;   /* 28px — Títulos de sección H2 */
  --fs-3xl:     2.25rem;   /* 36px — Métricas protagonistas (Cycle Day, DCA 1.8x, mNAV) */
  --fs-4xl:     2.25rem;   /* 36px — Alias de compatibilidad */
  --fs-hero:    3.5rem;    /* 56px — Precio de BTC y titular Hero H1 */

  /* --------------------------------------------------------------------------
     2. TOKENS DE INTERLINEADO (--lh-*)
     Evita que los títulos gigantes se desborden verticalmente
     -------------------------------------------------------------------------- */
  --lh-hero:    1.08; /* Para 56px y 36px */
  --lh-tight:   1.20; /* Para 28px y 24px */
  --lh-snug:    1.35; /* Para 20px y 18px */
  --lh-body:    1.55; /* Para 16px y 14px */
  --lh-relaxed: 1.65; /* Para lectura continua de análisis y tesis */

  /* --------------------------------------------------------------------------
     3. PESOS TIPOGRÁFICOS (--fw-*)
     Estandariza los pesos en todo el proyecto
     -------------------------------------------------------------------------- */
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  /* --------------------------------------------------------------------------
     4. TRACKING / LETTER SPACING (--ls-*)
     -------------------------------------------------------------------------- */
  --ls-tight:   -0.02em; /* Para números grandes y titulares H1/H2 */
  --ls-normal:   0em;
  --ls-label:    0.06em; /* Para etiquetas en mayúsculas (eyebrows) */
}

/* ── Foco de teclado (SOP-666 §6.3) ─────────────────────────────
   Vivía en tokens.css, pero 7 páginas con diseño propio no lo linkean y
   quedaban sin indicador de foco. En login.html eran 5 de 8 controles —
   incluidos email, contraseña y los dos botones: navegando con teclado no se
   sabía dónde se estaba parado en la pantalla de acceso.

   Se usa :focus-visible y no :focus a propósito: solo dispara con teclado, así
   que el anillo no aparece al hacer click con el mouse. Ese era el motivo por
   el que en su momento se pusieron los 10 `outline: none` del proyecto, que
   NO se eliminaron — conviven con esta regla.

   El halo (box-shadow) va además del outline porque sobre fondo oscuro un
   outline de 2px se confunde con el borde normal de un input. No ocupa espacio
   en el layout. */
:focus-visible {
  outline: 2px solid var(--accent-text, #3388ff);
  outline-offset: 2px;
  border-radius: 3px;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent-text, #3388ff);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(51, 136, 255, 0.22);
}

/* ── Reducir movimiento (SOP-666 §6.4) ──────────────────────────
   Mismo motivo de mudanza que el bloque de arriba. Respeta la preferencia de
   sistema de quien configuró reducir animaciones por vértigo o migraña. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Global V5 Page Loader & Skeleton (SOP-700 / UX Polish) ── */
.v5-page-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 70vh;
  gap: 16px;
  color: var(--text-3, #949db1);
  font-family: var(--font-display, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  font-size: var(--fs-md, 14px);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.v5-spinner {
  width: 28px;
  height: 28px;
  border: 2.5px solid rgba(255, 255, 255, 0.08);
  border-top-color: var(--accent, #0066ff);
  border-radius: 50%;
  animation: v5-spin 0.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes v5-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}