/* ============================================================
   ESCÉNIKA — Sistema de diseño
   Tokens: color, tipografía, espacio, movimiento, capas.

   Reparto de superficie: 70% negro sala · 20% telón vino · 10% luz.
   El dorado es LUZ, no pintura: poco y siempre brillando.
   Nada de dorado metálico/cromado: se usa plano + resplandor.
   ============================================================ */

:root {
  /* ---------- Marca ---------- */
  --sala: #000814;            /* fondo base, la sala con las luces bajas */
  --vino: #760010;            /* telón */
  --luz: #e6ab58;             /* luz dorada */
  --crema: #f3e9d8;           /* texto principal */

  /* ---------- Derivados del negro sala (superficies) ---------- */
  --sala-950: #00050e;
  --sala-850: #020d1f;
  --sala-800: #06142a;
  --sala-700: #0b1a30;
  --sala-600: #14253f;
  --sala-500: #20324f;

  /* ---------- Derivados del vino ---------- */
  --vino-profundo: #3d0009;
  --vino-medio: #5a000c;
  --vino-vivo: #a3192b;       /* solo filetes y detalles, nunca fondo grande */
  --vino-velo: rgba(118, 0, 16, 0.22);

  /* ---------- Derivados de la luz ---------- */
  --luz-clara: #f2c98a;
  --luz-honda: #b07f36;
  --luz-velo: rgba(230, 171, 88, 0.12);
  --luz-rastro: rgba(230, 171, 88, 0.28);

  /* ---------- Texto ---------- */
  --texto-alto: var(--crema);
  --texto-medio: #d3cabb;
  --texto-bajo: #9aa5b6;
  --texto-tenue: #8b96a8;

  /* ---------- Líneas ---------- */
  --linea: rgba(243, 233, 216, 0.1);
  --linea-fuerte: rgba(243, 233, 216, 0.2);
  --linea-luz: rgba(230, 171, 88, 0.32);

  /* ---------- Avisos (suaves, nada de rojo saturado) ---------- */
  --aviso: #e58d96;
  --ok: #7fc8a0;

  /* ---------- Tipografía ---------- */
  --font-marca: "Cinzel Decorative", "Cormorant Garamond", Georgia, serif;
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Escala fluida: clamp(mínimo móvil, preferido, máximo escritorio) */
  --fs-mega: clamp(2.75rem, 8.2vw, 8rem);
  --fs-h1: clamp(2.3rem, 6.4vw, 5.2rem);
  --fs-h2: clamp(1.9rem, 4.8vw, 3.6rem);
  --fs-h3: clamp(1.5rem, 2.8vw, 2.2rem);
  --fs-h4: clamp(1.2rem, 1.8vw, 1.5rem);
  --fs-lead: clamp(1.02rem, 1.4vw, 1.25rem);
  --fs-body: clamp(0.95rem, 1.02vw, 1.05rem);
  --fs-sm: 0.875rem;
  --fs-xs: 0.78rem;
  --fs-eyebrow: 0.68rem;

  --lh-tight: 0.96;
  --lh-snug: 1.12;
  --lh-normal: 1.5;
  --lh-loose: 1.7;

  --tr-tight: -0.015em;
  --tr-wide: 0.08em;
  --tr-eyebrow: 0.3em;
  --tr-marca: 0.08em;

  /* ---------- Espacio ---------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  --seccion-y: clamp(5rem, 11vw, 10rem);
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --medida: 62ch;
  --maxw: 1360px;
  --maxw-angosto: 960px;

  /* ---------- Radios: rectos, de teatro. Nada de "píldoras" salvo la barra ---------- */
  --r-xs: 1px;
  --r-sm: 2px;
  --r-md: 4px;
  --r-pill: 999px;

  /* ---------- Movimiento ---------- */
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-resorte: cubic-bezier(0.34, 1.4, 0.64, 1);
  --ease-telon: cubic-bezier(0.7, 0, 0.2, 1);

  --dur-rapida: 180ms;
  --dur-media: 380ms;
  --dur-lenta: 720ms;
  --dur-revelado: 1100ms;
  --dur-telon: 1500ms;

  /* ---------- Luz y sombra ---------- */
  --sombra-md: 0 14px 34px -14px rgba(0, 0, 0, 0.85);
  --sombra-lg: 0 34px 70px -26px rgba(0, 0, 0, 0.9);
  --brillo-luz: 0 0 0 1px var(--linea-luz), 0 18px 60px -22px rgba(230, 171, 88, 0.4);

  /* ---------- Capas ---------- */
  --z-fondo: 0;
  --z-contenido: 1;
  --z-vineta: 2;
  --z-sticky: 60;
  --z-drawer: 80;
  --z-nav: 85;   /* por encima del menú: el botón de cerrar siempre se ve */
  --z-cursor: 90;
  --z-grano: 95;
  --z-telon: 100;

  /* ---------- Estado del scroll (lo escribe JS) ---------- */
  --avance: 0;
}

@media (prefers-contrast: more) {
  :root {
    --linea: rgba(243, 233, 216, 0.28);
    --linea-fuerte: rgba(243, 233, 216, 0.45);
    --texto-bajo: #c3cbd6;
    --texto-tenue: #aab4c2;
  }
}