/* ============================================================================
   TOKENS — Sistema de diseño "Infierno Art Déco"
   ----------------------------------------------------------------------------
   Toda decisión visual vive aquí. Ninguna hoja de estilo posterior debe
   contener un color, una duración o un tamaño en crudo.

   REGLA DE ORO DE ESTA PALETA
   El rojo Hazbin es el color más bonito y el más peligroso del sistema.
   Ratios calculados sobre --bg (#0A0708):
     --bone-100  #F2E4CE  →  16.0:1   ✓ AA y AAA para cualquier tamaño
     --gold-500  #D4A548  →   8.85:1  ✓ AA para cuerpo de texto
     --bone-500  #A8937A  →   6.79:1  ✓ AA para texto secundario
     --gold-700  #8A6A24  →   3.99:1  ✗ solo bordes y decoración
     --blood-500 #C8202B  →   3.53:1  ✗ solo texto grande (≥24px) y acentos
   Es decir: el rojo NUNCA lleva cuerpo de texto. Lleva titulares, filetes,
   hovers y sangre. El texto lo lleva el hueso.
   ========================================================================= */

:root {
  /* ---------------------------------------------------------------- TINTA */
  --ink-900: #070506;
  --ink-800: #0a0708;
  --ink-700: #140d0e;
  --ink-600: #1e1416;
  --ink-500: #2a1c1f;

  /* --------------------------------------------------------------- SANGRE */
  --blood-900: #4a0d12;
  --blood-700: #8e1b22;
  --blood-500: #c8202b;
  --ember-500: #e2542a;
  --ember-300: #f08a4b;

  /* ----------------------------------------------------------------- ORO */
  --gold-700: #8a6a24;
  --gold-500: #d4a548;
  --gold-300: #f2ce6b;
  --gold-100: #fbeec4;

  /* ---------------------------------------------------------------- HUESO */
  --bone-100: #f2e4ce;
  --bone-300: #d9c7ac;
  --bone-500: #a8937a;

  /* ------------------------------------------------------------ SEMÁNTICA */
  --bg: var(--ink-800);
  --bg-deep: var(--ink-900);
  --bg-raised: var(--ink-700);
  --text: var(--bone-100);
  --text-dim: var(--bone-300);
  --text-muted: var(--bone-500);
  --accent: var(--gold-500);
  --accent-bright: var(--gold-300);
  --accent-hot: var(--blood-500);
  --ember: var(--ember-500);

  --line: color-mix(in oklab, var(--gold-500) 26%, transparent);
  --line-soft: color-mix(in oklab, var(--gold-500) 12%, transparent);
  --line-hot: color-mix(in oklab, var(--blood-500) 55%, transparent);

  --glow-gold: 0 0 24px color-mix(in oklab, var(--gold-500) 45%, transparent);
  --glow-blood: 0 0 32px color-mix(in oklab, var(--blood-500) 55%, transparent);

  /* --------------------------------------------------------------- TIPOS */
  --font-display: "Limelight", "Bodoni MT", Didot, "Times New Roman", serif;
  --font-deco: "Poiret One", "Josefin Sans", "Century Gothic", sans-serif;
  --font-body: "Josefin Sans", "Futura", "Century Gothic", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, monospace;

  /* Escala fluida: mínimo móvil → máximo escritorio, sin media queries. */
  --step--2: clamp(0.66rem, 0.62rem + 0.18vw, 0.75rem);
  --step--1: clamp(0.8rem, 0.75rem + 0.24vw, 0.94rem);
  --step-0: clamp(1rem, 0.94rem + 0.3vw, 1.18rem);
  --step-1: clamp(1.2rem, 1.08rem + 0.6vw, 1.6rem);
  --step-2: clamp(1.5rem, 1.25rem + 1.25vw, 2.4rem);
  --step-3: clamp(1.9rem, 1.4rem + 2.5vw, 3.6rem);
  --step-4: clamp(2.4rem, 1.4rem + 5vw, 6rem);
  --step-5: clamp(3rem, 1rem + 10vw, 11rem);

  --tracking-deco: 0.42em;
  --tracking-label: 0.28em;
  --leading-tight: 0.94;
  --leading-body: 1.68;

  /* ------------------------------------------------------------- ESPACIO */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1.15rem;
  --space-m: 1.85rem;
  --space-l: 3rem;
  --space-xl: 5rem;
  --space-2xl: clamp(4rem, 9vw, 9rem);
  --space-3xl: clamp(6rem, 16vw, 16rem);

  --measure: 62ch;
  --measure-tight: 44ch;
  --shell: min(1240px, 92vw);
  --shell-wide: min(1560px, 96vw);

  /* ---------------------------------------------------------------- FORMA */
  --radius-0: 0px;
  --radius-1: 2px;
  --step-notch: 12px;

  /* Esquina escalonada: el corte Art Déco. Se aplica con clip-path, así que
     recorta también bordes y sombras — los marcos van en SVG (js/deco.js).
     OJO: clip-path no genera scroll container, a diferencia de overflow:
     hidden. Por eso el sticky del programa sigue funcionando. */
  --notch: 14px;
  --notch-clip: polygon(
    0 var(--notch),
    calc(var(--notch) * 0.45) var(--notch),
    calc(var(--notch) * 0.45) calc(var(--notch) * 0.45),
    var(--notch) calc(var(--notch) * 0.45),
    var(--notch) 0,
    calc(100% - var(--notch)) 0,
    calc(100% - var(--notch)) calc(var(--notch) * 0.45),
    calc(100% - var(--notch) * 0.45) calc(var(--notch) * 0.45),
    calc(100% - var(--notch) * 0.45) var(--notch),
    100% var(--notch),
    100% calc(100% - var(--notch)),
    calc(100% - var(--notch) * 0.45) calc(100% - var(--notch)),
    calc(100% - var(--notch) * 0.45) calc(100% - var(--notch) * 0.45),
    calc(100% - var(--notch)) calc(100% - var(--notch) * 0.45),
    calc(100% - var(--notch)) 100%,
    var(--notch) 100%,
    var(--notch) calc(100% - var(--notch) * 0.45),
    calc(var(--notch) * 0.45) calc(100% - var(--notch) * 0.45),
    calc(var(--notch) * 0.45) calc(100% - var(--notch)),
    0 calc(100% - var(--notch))
  );

  /* --------------------------------------------------------------- MOTOR
     Curvas. La diferencia entre "una web" y "una web que se siente".
     --ease-deco     : salida larga, entrada brutal. El gesto de cortina.
     --ease-veil     : seda. Para opacidades y desenfoques.
     --ease-spring   : aproximación de muelle en linear(). Chrome 113+,
                       Safari 17.2+, Firefox 112+.
     --ease-stutter  : escalonado duro. Estática de radio, glitch, teletipo. */
  --ease-deco: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-veil: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in-out-quint: cubic-bezier(0.83, 0, 0.17, 1);
  --ease-spring: linear(
    0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077,
    1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%,
    1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%,
    0.997 69.8%, 1.003 76.9%, 1 100%
  );
  --ease-stutter: steps(1, end);

  --dur-instant: 90ms;
  --dur-fast: 220ms;
  --dur-base: 480ms;
  --dur-slow: 900ms;
  --dur-curtain: 1900ms;

  /* --------------------------------------------------------------- CAPAS */
  --z-shader: -3;
  --z-ornament: -2;
  --z-content: 1;
  --z-grain: 60;
  --z-nav: 70;
  --z-cursor: 90;
  --z-curtain: 100;

  /* ------------------------------------------------------- ESTADO GLOBAL
     Escritas por js/core.js en cada frame. No las toques a mano. */
  --vel: 0; /* velocidad de scroll normalizada -1..1 */
  --progress: 0; /* progreso de página 0..1 */
  --audio: 0; /* nivel RMS del sintetizador 0..1 */
  --intro: 0; /* apertura de la cortina 0..1 */
  --px: 0.5; /* puntero normalizado 0..1 */
  --py: 0.5;
  --grain: 0.05; /* intensidad del grano fílmico */
}

/* --------------------------------------------------------------------------
   AJUSTES POR PREFERENCIA DEL SISTEMA
   No son "extras de accesibilidad": son el contrato mínimo del sitio.
   ------------------------------------------------------------------------ */

/* Menos movimiento: no es que animemos menos, es que el sitio se vuelve
   estático y perfectamente legible. Ver js/core.js para la parte JS. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms;
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --dur-curtain: 0ms;
    --grain: 0;
  }
}

/* Menos transparencia: los cristeles se vuelven opacos. */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --veil-alpha: 1;
  }
}

/* Más contraste: subimos filetes y texto secundario. */
@media (prefers-contrast: more) {
  :root {
    --line: color-mix(in oklab, var(--gold-500) 62%, transparent);
    --line-soft: color-mix(in oklab, var(--gold-500) 34%, transparent);
    --text-dim: var(--bone-100);
    --text-muted: var(--bone-300);
    --grain: 0;
  }
}

/* Modo claro: no diseñamos uno "bonito", diseñamos uno legible.
   Un sitio de evento infernal en blanco radiante es una traición, así que
   el modo claro sube a un papel envejecido con tinta sangre. */
@media (prefers-color-scheme: light) {
  :root {
    --bg: #efe3d0;
    --bg-deep: #e3d3ba;
    --bg-raised: #f7eee0;
    --text: #241417;
    --text-dim: #4a2f33;
    --text-muted: #6b4a4a;
    --accent: #7a5714;
    --accent-bright: #5c3f0a;
    --accent-hot: #a3161f;
    --line: color-mix(in oklab, #7a5714 34%, transparent);
    --line-soft: color-mix(in oklab, #7a5714 16%, transparent);
  }
}