/* ==========================================================================
   EL JICHI - tokens.css
   Concepto: un cuarto a oscuras con el neon encendido.
   Superficies en negro tibio tintado a verde; el unico elemento que emite
   luz es el neon. Valores en OKLCH con fallback hexadecimal.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tipografias self-hosted
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Anton";
  src: url("../fonts/Anton-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Un solo archivo: Space Grotesk es una fuente variable (eje wght 300 a
   700). Antes habia tres @font-face (400, 500 y 700) apuntando a tres copias
   identicas del mismo archivo, que el navegador bajaba tres veces. */
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/SpaceGrotesk-var.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Space Mono";
  src: url("../fonts/SpaceMono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Space Mono";
  src: url("../fonts/SpaceMono-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Fuentes de respaldo con las metricas de la fuente real (medidas con
   fontTools sobre los woff2 y los TTF del sistema: ancho medio de "the quick
   brown fox..." y ascent/descent de hhea). Mientras Anton y Space Grotesk
   llegan con swap, Impact, Arial Narrow y Arial ocupan exactamente el mismo
   ancho y la misma linea de base, asi el titular del hero y los titulos no
   se reacomodan al cambiar de fuente. Van justo detras de la fuente real en
   la pila de --font-display y --font-body. */
@font-face {
  font-family: "Anton Fallback";
  src: local("Impact");
  size-adjust: 101.09%;
  ascent-override: 116.36%;
  descent-override: 32.56%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Anton Fallback Narrow";
  src: local("Arial Narrow"), local("ArialNarrow");
  size-adjust: 111.66%;
  ascent-override: 105.35%;
  descent-override: 29.47%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Space Grotesk Fallback";
  src: local("Arial"), local("ArialMT");
  size-adjust: 110.8%;
  ascent-override: 88.81%;
  descent-override: 26.35%;
  line-gap-override: 0%;
}

/* --------------------------------------------------------------------------
   2. Propiedades registradas
   Solo las que cambian con el modo del letrero necesitan animarse. El
   initial-value hace de fallback si el navegador no entiende oklch.
   -------------------------------------------------------------------------- */

@property --neon {
  syntax: "<color>";
  inherits: true;
  initial-value: #39ff14;
}

@property --neon-core {
  syntax: "<color>";
  inherits: true;
  initial-value: #eaffdf;
}

@property --neon-glow {
  syntax: "<color>";
  inherits: true;
  initial-value: rgba(57, 255, 20, 0.55);
}

@property --line-hot {
  syntax: "<color>";
  inherits: true;
  initial-value: rgba(57, 255, 20, 0.55);
}

@property --neon-dim {
  syntax: "<color>";
  inherits: true;
  initial-value: #3fbf3a;
}

/* La piel de la serpiente del letrero: relleno oscuro de la cabeza (dos
   topes del degradado) y la tinta de boca, fosas y pupilas. */
@property --neon-fill-a {
  syntax: "<color>";
  inherits: true;
  initial-value: #0a361d;
}

@property --neon-fill-b {
  syntax: "<color>";
  inherits: true;
  initial-value: #09300f;
}

@property --neon-ink {
  syntax: "<color>";
  inherits: true;
  initial-value: #03220c;
}

/* --------------------------------------------------------------------------
   3. Paleta (fallback hexadecimal)
   -------------------------------------------------------------------------- */

:root {
  color-scheme: dark;

  /* superficies: negro tibio tintado a verde, nunca negro puro */
  --bg: #090d0a;
  --bg-2: #0d1410;
  --stage: #10201a;
  --stage-2: #143d2e;
  --line: rgba(126, 160, 137, 0.22);
  --line-hot: rgba(57, 255, 20, 0.55);

  /* tinta */
  --ink: #f1f7ef;
  --ink-2: #a6b3a9;
  --ink-3: #849187;

  /* luz */
  --neon: #39ff14;
  --neon-core: #eaffdf;
  --neon-glow: rgba(57, 255, 20, 0.55);
  --neon-dim: #3fbf3a;

  /* piel de la serpiente: medida en el letrero (relleno #0a361d -> #09300f,
     tinta #03220c) y oscurecida al tono de cada modo */
  --neon-fill-a: #0a361d;
  --neon-fill-b: #09300f;
  --neon-ink: #03220c;

  /* acentos puntuales */
  --tongue: #ff2a2a;
  --tongue-core: #ff5c4a;
  --amber: #ff9b2f;
}

/* Los OKLCH de abajo son la conversion exacta de los hexadecimales de arriba,
   verificada pintando cada color en un canvas de 1x1 y leyendo el pixel. No
   son valores "a ojo": si se tocan, hay que volver a convertir, porque el
   navegador que entiende oklch tiene que ver EXACTAMENTE el mismo color que
   el que no lo entiende. */
@supports (color: oklch(50% 0.1 150)) {
  :root {
    --bg: oklch(15.33% 0.0091 153);
    --bg-2: oklch(18.24% 0.0135 159.7);
    --stage: oklch(22.69% 0.0249 168.3);
    --stage-2: oklch(32.61% 0.0534 166);
    --line: oklch(67.36% 0.0505 155.2 / 0.22);
    --line-hot: oklch(87.14% 0.286 141.5 / 0.55);

    --ink: oklch(96.94% 0.0123 137.8);
    --ink-2: oklch(75.36% 0.0202 152.7);
    --ink-3: oklch(64.31% 0.021 152.6);

    --neon: oklch(87.14% 0.286 141.5);
    --neon-core: oklch(97.62% 0.0474 134.7);
    --neon-glow: oklch(87.14% 0.286 141.5 / 0.55);
    --neon-dim: oklch(70.85% 0.2047 142.5);

    --tongue: oklch(64.27% 0.2429 27.6);
    --amber: oklch(77.68% 0.1636 62);
  }
}

/* --------------------------------------------------------------------------
   4. Modos del letrero
   Tocar la serpiente del hero cicla el color. Cambian las cinco variables de
   luz (la quinta es --neon-dim, el apagado que consume el ticket del
   agendador: sin el, el ticket se quedaba verde en rojo, azul y violeta).
   Las fotos: con puntero fino viran por la veladura tenida de .plate::after
   (solo opacidad, declarada en styles.css; el hue-rotate sobre fotos a
   sangre y sobre el video del hero era un filtro vivo sobre elementos
   grandes), y en el celular se quedan como estan.
   -------------------------------------------------------------------------- */

:root {
  transition:
    --neon 600ms var(--ease-out),
    --neon-core 600ms var(--ease-out),
    --neon-glow 600ms var(--ease-out),
    --neon-dim 600ms var(--ease-out),
    --neon-fill-a 600ms var(--ease-out),
    --neon-fill-b 600ms var(--ease-out),
    --neon-ink 600ms var(--ease-out),
    --line-hot 600ms var(--ease-out);
}

:root[data-neon-mode="rojo"] {
  --neon: #ff343e;
  --neon-core: #ffe7de;
  --neon-glow: rgba(255, 52, 62, 0.55);
  --neon-dim: #bd3636;
  --line-hot: rgba(255, 52, 62, 0.55);
  --neon-fill-a: #3a0d12;
  --neon-fill-b: #300a0e;
  --neon-ink: #1e0509;
}

:root[data-neon-mode="azul"] {
  --neon: #3d9eff;
  --neon-core: #e2f8ff;
  --neon-glow: rgba(61, 158, 255, 0.55);
  --neon-dim: #3978c5;
  --line-hot: rgba(61, 158, 255, 0.55);
  --neon-fill-a: #0b1f3a;
  --neon-fill-b: #081a33;
  --neon-ink: #041024;
}

:root[data-neon-mode="violeta"] {
  --neon: #b96aff;
  --neon-core: #fdedff;
  --neon-glow: rgba(185, 106, 255, 0.55);
  --neon-dim: #8855bb;
  --line-hot: rgba(185, 106, 255, 0.55);
  --neon-fill-a: #2a0f3a;
  --neon-fill-b: #230b33;
  --neon-ink: #160522;
}

@supports (color: oklch(50% 0.1 150)) {
  :root[data-neon-mode="rojo"] {
    --neon: oklch(66% 0.24 25);
    --neon-core: oklch(97% 0.06 30);
    --neon-glow: oklch(66% 0.24 25 / 0.55);
    --neon-dim: oklch(53.7% 0.172 25);
    --line-hot: oklch(66% 0.24 25 / 0.55);
  }

  :root[data-neon-mode="azul"] {
    --neon: oklch(70% 0.19 255);
    --neon-core: oklch(97% 0.04 250);
    --neon-glow: oklch(70% 0.19 255 / 0.55);
    --neon-dim: oklch(56.9% 0.136 255);
    --line-hot: oklch(70% 0.19 255 / 0.55);
  }

  :root[data-neon-mode="violeta"] {
    --neon: oklch(68% 0.22 305);
    --neon-core: oklch(97% 0.05 305);
    --neon-glow: oklch(68% 0.22 305 / 0.55);
    --neon-dim: oklch(55.3% 0.158 305);
    --line-hot: oklch(68% 0.22 305 / 0.55);
  }
}

/* --------------------------------------------------------------------------
   5. Tipografia: familias y escala
   -------------------------------------------------------------------------- */

:root {
  --font-display: "Anton", "Anton Fallback", "Anton Fallback Narrow", "Arial Narrow", Impact, sans-serif;
  --font-body: "Space Grotesk", "Space Grotesk Fallback", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Space Mono", ui-monospace, "Courier New", monospace;

  /* EXPERIENCIA 3 pide clamp(2.6rem, 7.2vw, 6.4rem), pero a 6.4rem las tres
     lineas que manda EXPERIENCIA 5.1 ("Hace sonar tu evento." mide 8.64em en
     Anton) se parten en dos cada una dentro de su columna. Medido en el
     navegador: el maximo que deja las tres lineas enteras es 5.6vw con tope
     en 5.4rem, y 2.3rem a 375px. Tres lineas limpias mandan sobre el numero. */
  --fs-hero: clamp(2.3rem, 5.6vw, 5.4rem);
  --fs-word: clamp(5rem, 18vw, 17rem);
  --fs-h2: clamp(2.4rem, 6vw, 5rem);
  --fs-h3: clamp(1.35rem, 2.6vw, 1.75rem);
  --fs-lead: clamp(1.0625rem, 1.6vw, 1.25rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.875rem;
  --fs-data: 0.9375rem;
  --fs-mono: 0.8125rem;
  --fs-mono-lg: 0.9375rem;

  --lh-display: 0.9;
  --lh-body: 1.55;

  --tracking-display: -0.005em;
  --tracking-mono: 0.06em;
  --measure: 64ch;
}

/* --------------------------------------------------------------------------
   6. Espaciado y ritmo
   -------------------------------------------------------------------------- */

:root {
  --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;

  --gutter: 1.25rem;
  --maxw: 84rem;
  --scene-pad: clamp(4.5rem, 12vw, 9rem);

  --nav-h: 56px;
  --radius: 3px;
  --radius-lg: 6px;
  --tap: 44px;
  --card-pad: 1.25rem;
}

@media (min-width: 48em) {
  :root {
    --gutter: 2.5rem;
    --nav-h: 68px;
    --card-pad: 1.75rem;
  }
}

@media (min-width: 75em) {
  :root {
    --gutter: 4rem;
  }
}

/* --------------------------------------------------------------------------
   7. Movimiento
   -------------------------------------------------------------------------- */

:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 150ms;
  --t-base: 220ms;
  --t-slow: 600ms;

  --z-base: 1;
  --z-nav: 80;
  --z-menu: 90;
  --z-pre: 100;
}

/* --------------------------------------------------------------------------
   8. Alias que consume agendador.css
   El agendador se conserva tal cual: estos nombres lo enchufan a la paleta
   nueva sin tocar su logica.
   -------------------------------------------------------------------------- */

:root {
  --panel: var(--stage);
  --line-soft: var(--line);
  --neon-2: var(--neon-core);
  --red: var(--tongue);
  --paper: var(--stage-2);
  --paper-ink: var(--ink);
  --jichi-green: var(--stage-2);
}