/* =============================================================================
   system.css — Motor de diseño compartido · apple-design · Fase 0
   -----------------------------------------------------------------------------
   Aditivo y no-invasivo por construcción:
     · Los tokens son NUEVOS (--dur/--ease/--track/--blur): no pisan nada.
     · Los @media de accesibilidad SOLO afectan a quien activó la preferencia.
     · El press usa :where() (especificidad 0) → cualquier :active propio lo gana.
     · Los helpers (.ev-glass, .track-*, .will-animate) son opt-in.
   Cargar DESPUÉS de tailwind.min.css y ANTES del <style> inline de cada página.
   Ref: skill apple-design §1 §7 §11 §12 §14 §15.
   ============================================================================= */

:root{
  /* — Duración (§4): vocabulario de tiempos, en vez de 40+ valores mágicos — */
  --dur-instant: 80ms;
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    320ms;

  /* — Easing (§7): curva estándar + entrada/salida espejadas + overshoot — */
  --ease-standard: cubic-bezier(.4, 0, .2, 1);   /* propósito general        */
  --ease-out:      cubic-bezier(.16, 1, .3, 1);  /* decel · entradas         */
  --ease-in:       cubic-bezier(.7, 0, .84, 0);  /* accel · salidas (espejo) */
  --ease-spring:   cubic-bezier(.34, 1.4, .64, 1);/* overshoot · SOLO momentum */

  /* — Tracking por rol (§15): el tracking es específico del tamaño, no fijo — */
  --track-display: -0.022em;  /* titulares grandes  */
  --track-heading: -0.012em;  /* headings medios    */
  --track-body:     0;        /* cuerpo             */
  --track-caps:     0.06em;   /* labels en mayúsc.  */

  /* — Materiales (§12): escala de blur consistente; grande = más blur — */
  --blur-chip:   8px;
  --blur-panel:  16px;
  --blur-chrome: 24px;
  --glass-light: rgba(255, 255, 255, .72);
  --glass-dark:  rgba(15, 23, 42, .66);
}

/* -----------------------------------------------------------------------------
   §1 / §10 — Feedback de PRESS (pointer-down)
   El hover no existe en táctil; el press debe verse al instante. :where() = 0
   de especificidad → si la página ya define su :active, el suyo gana.
   Nota: los <a> con utilidades de Tailwind (CTAs de marketing) se cubren en
   Fase 2 con la utilidad active:*, no aquí, para no escalar todos los enlaces.
   -------------------------------------------------------------------------- */
:where(button, [role="button"], summary,
       input[type="button"], input[type="submit"], input[type="reset"],
       .btn, [class*="btn"], [class*="Btn"]){
  transition: transform var(--dur-instant) var(--ease-standard);
}
:where(button, [role="button"], summary,
       input[type="button"], input[type="submit"], input[type="reset"],
       .btn, [class*="btn"], [class*="Btn"]):active{
  transform: scale(.97);
}
/* CTAs hechos con <a> (marketing usa utilidades de Tailwind, sin clase semántica).
   Heurística: un <a> con alguna utilidad rounded-* es pill/card/CTA, nunca un enlace
   de texto en línea → darle press. :where() = 0 especificidad (no pisa nada propio). */
:where(a[class*="rounded"]){ transition: transform var(--dur-instant) var(--ease-standard); }
:where(a[class*="rounded"]):active{ transform: scale(.97); }

/* -----------------------------------------------------------------------------
   §14 — Reduced motion. Reset de accesibilidad canónico.
   Solo afecta a quien PIDIÓ menos movimiento. Neutraliza además los loops
   `infinite` (badges que laten, spinners) que hoy quedan fuera de cobertura.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* -----------------------------------------------------------------------------
   §14 — Reduced transparency / contraste alto. El glass se vuelve sólido.
   Quita el blur para quien lo pidió; el color de fondo del elemento se conserva.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-transparency: reduce){
  *{ backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
}
@media (prefers-contrast: more){
  *{ backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
}

/* -----------------------------------------------------------------------------
   §15 — Optical sizing (hoy 0 usos). Barato y sin riesgo: solo afecta a fuentes
   variables con eje opsz (Fraunces, Material Symbols, etc.).
   -------------------------------------------------------------------------- */
html{ font-optical-sizing: auto; }

/* =============================================================================
   HELPERS OPT-IN — disponibles para la Fase 2; sin efecto hasta que se usen.
   ============================================================================= */

/* §12 — Chrome translúcido canónico, con fallback sólido y modo oscuro. */
.ev-glass{
  background: var(--glass-light);
  backdrop-filter: blur(var(--blur-chrome)) saturate(180%);
  -webkit-backdrop-filter: blur(var(--blur-chrome)) saturate(180%);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .ev-glass{ background: #ffffff; }
}
@media (prefers-color-scheme: dark){
  .ev-glass{ background: var(--glass-dark); }
}

/* §15 — Tracking por rol (aplicar por clase donde haga falta). */
.track-display{ letter-spacing: var(--track-display); }
.track-heading{ letter-spacing: var(--track-heading); }
.track-caps{ letter-spacing: var(--track-caps); text-transform: uppercase; }

/* §11 — Hint al compositor donde el movimiento es inminente. */
.will-animate{ will-change: transform, opacity; }