/* ============================================================
 * YoMeAnimo! · Design Tokens
 * ------------------------------------------------------------
 * Source of truth: yma-context/Marca/sistema-marca.md
 * Última actualización: 2026-06-24
 *
 * Listo para @import en el theme:
 *   @import url('design-tokens.css');
 *
 * Convenciones:
 *   --yma-*       → paleta de ACADEMY (no la oficial de YMA! — ver la nota de abajo)
 *   --violet-*    → rampa derivada (escala numérica)
 *   --bg-*        → backgrounds semánticos
 *   --text-*      → familias semánticas de texto / SIZES
 *   --space-*     → escala de espaciados (base 4px)
 *   --radius-*    → border-radius
 *   --bp-*        → breakpoints (referencia — usar en @media)
 *   --container-* → max-widths para containers
 *   --leading-*   → line-heights
 *   --font-*      → familias y pesos tipográficos
 *   --state-*     → estados semánticos (ok/warn/danger)
 *   --border-*    → separadores
 * ============================================================ */

:root {
  /* ============================================================
   * 1. PALETA DE MARCA (oficial)
   * ============================================================ */

  /* Colores de marca */
  /* ── PALETA DE ACADEMY ─────────────────────────────────────────────────────
     Decisión de Berna, 2026-08-02: Academy conserva su identidad propia en vez de
     pasar a la paleta oficial de YoMeAnimo!. Los valores salen de medir el sitio en
     producción (ver SISTEMA-DE-DISENO-PRODUCCION.md) y son los mismos del logo.

              Academy      YMA! oficial
     magenta  #ED265B      #FF3366
     violeta  #7324BB      #6A3765
     lima     #C3FF00      (no existe)
     turquesa (no existe)  #00DBD0

     Los nombres de token NO cambian: `--yma-magenta` sigue siendo "el magenta de la
     marca de este sitio". Si algún día Academy se alinea con YMA!, se cambian estos
     cuatro valores y el sitio entero se actualiza — que es exactamente lo que hoy no
     se puede hacer en el WordPress, donde los colores están escritos a mano en tres
     lugares distintos.                                                             */
  --yma-magenta:     #ED265B;   /* el rosa de la marca, tal cual el del logo */
  /* El rosa de marca sobre blanco da 4,18:1 y AA pide 4,5. Esta variante es el MISMO tono
     (344°) y la MISMA saturación (85%), sólo 9% más oscura. Al ojo es el mismo rosa.
     Se usa en todo lo que tenga que leerse: texto chico sobre fondo claro y el fondo de
     los botones, donde va una etiqueta blanca encima.

     La luminosidad la fija el peor caso, que no es el blanco sino el gris alterno
     #EEF1F6: sobre blanco da 5,30:1 y sobre el gris 4,68:1. Con el valor anterior
     (#DD1248) el blanco pasaba y el gris no, y las etiquetas de las secciones alternas
     quedaban por debajo del mínimo.

     #ED265B queda para superficies grandes y decoración, donde el contraste no aplica. */
  --magenta-600:     #D41145;
  --yma-lima:        #C3FF00;   /* SÓLO sobre fondos oscuros: sobre blanco es ilegible */
  --yma-violet:      #7324BB;
  --yma-violet-deep: #52039A;   /* el que ya usa producción para hovers */
  --yma-violet-dark: #270C40;   /* derivado del violeta a L=15%, para superficies oscuras */

  /* Rampa violeta derivada */
  --violet-100: #EBDDF8;
  --violet-300: #BA87E8;
  --violet-500: #8832D7;
  --violet-600: #7324BB;  /* = --yma-violet */
  --violet-700: #52039A;  /* = --yma-violet-deep */
  /* Un escalón por encima del `--yma-violet-dark`. Mismo tono (271°) y misma saturación
     (68%) que el violeta de marca, a L=23% en vez de 15%.
     Existe por las banderas: al sacarles el marco (2026-08-02), las de Australia y Nueva
     Zelanda —azul marino— se fundían con el violeta más oscuro. Sobre este se recortan y
     el blanco sigue dando 14,3:1, muy por encima del 4,5 que pide AA. */
  --violet-800: #3C1363;


  /* ============================================================
   * 2. TIPOGRAFÍAS
   * ============================================================ */

  /* Familias */
  --font-display: 'Outfit', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-sans:    'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Monaco, Consolas, monospace;

  /* Pesos */
  --font-regular:   400;
  --font-medium:    500;
  --font-semibold:  600;
  --font-bold:      700;
  /* 800 es el peso de los títulos de display (hero y títulos de sección). Se agregó el
     2026-08-02 con la nueva home: a 700, Outfit en 56-72px se lee correcto pero blando, y
     el hero es lo único que tiene que sonar fuerte. Viaja en el mismo pedido de Google
     Fonts que los otros pesos, así que no agrega una request. NO usarlo en texto corrido. */
  --font-extrabold: 800;

  /* Escala de tamaños — MOBILE (default) */
  /* REGLA: cuerpo / párrafos / viñetas = 16px (--text-base), mobile y desktop.
     14–14.5px solo secundario (metadata/chips/captions). 13/11px solo microcopy.
     Nunca bajar párrafos ni viñetas de 16px. Ver sistema-marca.md §Tipografías. */
  --text-xs:    11px;
  --text-sm:    13px;
  --text-base:  16px;
  --text-md:    18px;
  --text-lg:    22px;
  --text-xl:    26px;
  --text-2xl:   32px;
  --text-3xl:   44px;
  --text-4xl:   56px;

  /* Escala de headings de ARTÍCULO — mobile
     Para el cuerpo de artículos (requisitos-{país}, aplicar-{país}).
     La escala display (--text-3xl etc.) es para landings/heros.
     Ver sistema-marca.md §Escala de headings de ARTÍCULO. */
  --article-h1:      30px;  /* Título del artículo (hero) */
  --article-h1-lh:   1.18;
  --article-h2:      28px;  /* Títulos de sección */
  --article-h2-lh:   1.15;
  --article-h3:      19px;  /* Sub-secciones / títulos de tarjeta */
  --article-h3-lh:   1.18;
  --article-h4:      16px;  /* Mini-títulos dentro de tarjetas */
  --article-h4-lh:   1.25;

  /* Line-heights */
  --leading-tight:    1.1;
  --leading-snug:     1.25;
  --leading-normal:   1.5;
  --leading-relaxed:  1.6;


  /* ============================================================
   * 3. ESPACIADOS (escala base 4px)
   * ============================================================ */

  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   96px;
  --space-10:  128px;


  /* ============================================================
   * 4. BORDER RADIUS
   *
   * Botones de acción → --radius-full (pill completo).
   * Decisión 2026-07-18 (revierte la regla rounded-rect 15-16px
   * del 2026-07-12). Excepción: filas-botón anchas de 2+ líneas
   * (ícono + título + subtítulo) usan --radius-lg como las cards.
   *
   * ⚠️ CAMPOS DE FORMULARIO (inputs, selects, DROPDOWNS) →
   * --radius-md (12px) SIEMPRE. El pill es de ACCIONES; un
   * dropdown es un CAMPO: nunca pill ni radios intermedios
   * (la regla de botones NO se hereda a los campos — error real
   * corregido por Berna 2026-07-18: el dropdown de pasaporte se
   * había pilleado por arrastre). El trigger a 12px empareja con
   * el panel que despliega (--radius-lg 16px); los chips de
   * selección directa (ej. rangos de edad) sí son pill.
   * Detalle en sistema-marca.md § "Shape del botón".
   * ============================================================ */

  --radius-none:  0;
  --radius-xs:    4px;
  --radius-sm:    8px;
  --radius-md:    12px;
  --radius-lg:    16px;   /* cards · filas-botón anchas */
  --radius-xl:    22px;
  --radius-full:  999px;  /* botones de acción · pills · FAB */


  /* ============================================================
   * 5. BREAKPOINTS (referencia — usar literal en @media)
   * ============================================================ */

  /* Las CSS vars no se pueden usar dentro de @media (limitación
   * del lenguaje), pero las dejo como referencia para que el equipo
   * use los mismos valores siempre. */
  --bp-sm:   640px;
  --bp-md:   768px;
  --bp-lg:   1024px;
  --bp-xl:   1280px;
  --bp-2xl:  1536px;

  /* Container max-widths */
  --container-sm:  640px;
  --container-md:  720px;   /* Lectura larga (Guías Maestras, artículos) */
  --container-lg:  1024px;
  --container-xl:  1100px;  /* Container principal del sitio */


  /* ============================================================
   * 6. TOKENS SEMÁNTICOS (promovidos desde guia-maestra.html)
   * ============================================================ */

  /* Backgrounds */
  /* El nombre dice "crema" por herencia del sistema de YMA!; en Academy es el gris
     azulado que producción usa para las secciones alternas. Se conserva el nombre a
     propósito: renombrarlo obliga a tocar las plantillas sin que cambie nada visible. */
  --bg-cream:    #EEF1F6;
  --bg-cream-2:  #DFE5EF;
  --bg-paper:    #FFFFFF;

  /* Texto */
  --text-ink:    #1B1B1B;   /* el mismo que usa producción para los títulos oscuros */
  --text-ink-2:  #3C3C3E;
  /* Producción usa #7F8C8D para el texto secundario y da 3,5:1 sobre blanco, por debajo
     del 4,5 que pide AA. Se conserva el tono y se oscurece hasta pasar. */
  --text-muted:  #6B7678;

  /* Borders / separadores */
  --border-subtle:  rgba(27, 27, 27, 0.10);
  --border-strong:  rgba(27, 27, 27, 0.20);

  /* Estados (mensajería de UI) */
  --state-ok:      #1B9A6B;
  --state-warn:    #E0943B;
  --state-danger:  #ED265B;  /* = --yma-magenta */


  /* ============================================================
   * 7. MOTION (afinado 2026-07-12 — audit Emil Kowalski,
   *    validado en la maqueta Guía Maestra sticky-v2)
   * ============================================================ */

  /* Curvas — más decididas que las built-in del navegador */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);   /* entradas y respuesta al toque: arranca rápido, frena suave */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);  /* movimiento/transformación en pantalla (acordeones, chevrons, morphs) */
  --ease-drawer: cubic-bezier(0.2, 0.8, 0.2, 1);   /* entrada de bottom-sheets/drawers (curva estilo iOS) */

  /* Duraciones — regla: UI siempre <300ms; salidas ~30% más cortas que entradas */
  --transition-fast:  150ms var(--ease-out);    /* hovers, cambios de color/borde */
  --transition-base:  250ms var(--ease-out);    /* fades, overlays, tooltips */
  --transition-slow:  350ms var(--ease-in-out); /* expandibles y morphs — NO para UI frecuente */
  --duration-press:   160ms;                    /* press feedback táctil: transform scale(.97) en :active */
}


/* ============================================================
 * RESPONSIVE — Escala tipográfica desktop
 * ============================================================ */

@media (min-width: 1024px) {
  :root {
    --text-base:  16px;
    --text-md:    20px;
    --text-lg:    24px;
    --text-xl:    30px;
    --text-2xl:   38px;
    --text-3xl:   52px;
    --text-4xl:   72px;
  }
}


/* ============================================================
 * UTILIDADES BASE (opcional — borrar si el theme tiene su reset)
 * ============================================================ */

/* Aplicar la familia base por defecto */
:where(html) {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-ink);
  background: var(--bg-cream);
}

:where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-display);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  color: var(--text-ink);
}

/* Display (landings, heros) */
:where(h1) { font-size: var(--text-3xl); }
:where(h2) { font-size: var(--text-2xl); }
:where(h3) { font-size: var(--text-xl); line-height: var(--leading-snug); }
:where(h4) { font-size: var(--text-lg); line-height: var(--leading-snug); }

/* Artículo (requisitos-{país}, aplicar-{país}, guías) */
:where(.article) :where(h1) { font-size: var(--article-h1); line-height: var(--article-h1-lh); }
:where(.article) :where(h2) { font-size: var(--article-h2); line-height: var(--article-h2-lh); }
:where(.article) :where(h3) { font-size: var(--article-h3); line-height: var(--article-h3-lh); }
:where(.article) :where(h4) { font-size: var(--article-h4); line-height: var(--article-h4-lh); }

:where(small, .text-sm)  { font-size: var(--text-sm); }
:where(.text-xs)         { font-size: var(--text-xs); }
:where(.text-muted)      { color: var(--text-muted); }


/* ============================================================
 * ACCESIBILIDAD — focus visible y reducciones
 * ============================================================ */

:where(:focus-visible) {
  outline: 2px solid var(--yma-violet);
  outline-offset: 2px;
}

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