/* ============================================================================
   ALWAYS — sistema de diseño
   Nocturno de tinta y pan de oro, con aurora. Hereda el alma de "Contigo"
   (serif itálica + oro sobre noche) y le añade profundidad, color vivo y luz
   que se mueve.

   Un solo mundo visual: siempre noche. No invierte con el tema del sistema.
   ========================================================================== */

:root,
:root[data-theme="dark"],
:root[data-theme="light"] {
  color-scheme: dark;

  /* ── Fondos: de lo más hondo a lo más cercano ── */
  --abismo:    #05040B;
  --ink:       #08070F;
  --velvet:    #12101F;
  --card:      #1A1730;
  --card-hi:   #221D3C;
  --line:      #2E2848;
  --line-hi:   #453C6B;

  /* ── Luz: oro, latón, rosa ── */
  --gold:      #E9C784;
  --gold-soft: #F4E2BE;
  --gold-deep: #C9A15C;
  --brass:     #A57C3E;
  --rose:      #DE8B84;
  --rose-deep: #9E5B58;

  /* ── Aurora: los tres colores que respiran en el fondo ── */
  --aurora-1:  #6E4BF5;   /* violeta */
  --aurora-2:  #2CC7C0;   /* verde agua */
  --aurora-3:  #F2789B;   /* rosa encendido */
  --aurora-4:  #3B8AF6;   /* azul de madrugada */

  /* ── Texto ── */
  --mist:       #D6CFE4;
  --mist-dim:   #8F87A9;
  --mist-faint: #605A7C;

  /* ── Tipografía ── */
  --display: "Cormorant Garamond", ui-serif, "Iowan Old Style",
             "Palatino Linotype", Palatino, Georgia, serif;
  --util: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont,
          "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mano: "Caveat", "Segoe Script", cursive;

  /* Escala fluida: crece con la ventana sin saltos ni media queries */
  --t-xs:  clamp(11px, 0.72rem + 0.1vw, 13px);
  --t-sm:  clamp(13px, 0.82rem + 0.2vw, 15px);
  --t-md:  clamp(15px, 0.92rem + 0.3vw, 18px);
  --t-lg:  clamp(19px, 1.05rem + 0.9vw, 26px);
  --t-xl:  clamp(26px, 1.3rem + 2.2vw, 44px);
  --t-2xl: clamp(34px, 1.5rem + 4.4vw, 72px);
  --t-3xl: clamp(44px, 1.6rem + 7.5vw, 116px);

  /* ── Ritmo ── */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 72px;

  --r-s: 10px;   --r-m: 16px;   --r-l: 24px;   --r-xl: 34px;
  --r-full: 999px;

  /* ── Movimiento: una sola gramática de curvas ── */
  --ease-out:  cubic-bezier(.16, 1, .3, 1);      /* llega y se posa */
  --ease-in:   cubic-bezier(.7, 0, .84, 0);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);  /* rebota un pelín */
  --d-xs: 120ms;  --d-sm: 220ms;  --d-md: 420ms;
  --d-lg: 700ms;  --d-xl: 1200ms;

  /* ── Sombras y halos ── */
  --sombra-baja:  0 2px 10px rgba(0,0,0,.35);
  --sombra-media: 0 12px 34px rgba(0,0,0,.45);
  --sombra-alta:  0 28px 70px rgba(0,0,0,.55);
  --halo-oro:   0 0 28px rgba(233,199,132,.28);
  --halo-rosa:  0 0 32px rgba(242,120,155,.30);
  --halo-agua:  0 0 32px rgba(44,199,192,.26);

  /* ── Cristal (tarjetas y hojas) ── */
  --cristal: linear-gradient(155deg,
             rgba(46,40,72,.58), rgba(18,16,31,.72));
  --cristal-borde: 1px solid rgba(233,199,132,.14);
  --blur: saturate(140%) blur(14px);

  /* ── Medidas de la app ── */
  --shell: 480px;        /* la app no se ensancha más que esto */
  --ancho-lectura: 62ch;
  --nav-h: 62px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);

  /* ── Variables vivas: las escribe el JS ── */
  --px: 0.5;             /* puntero X normalizado 0..1 */
  --py: 0.5;             /* puntero Y normalizado 0..1 */
  --scroll: 0;           /* progreso de scroll 0..1 */
  --latido: 0;           /* pulso 0..1, sube con cada latido */
  --hora: 0.5;           /* 0 medianoche, 0.5 mediodía: tiñe la aurora */
}

/* Quien pida menos movimiento, recibe menos movimiento. Nunca menos belleza:
   se quedan los degradados, los halos y el color; se van los bucles. */
@media (prefers-reduced-motion: reduce) {
  :root { --d-md: 1ms; --d-lg: 1ms; --d-xl: 1ms; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}