/* Hallmark · genre: editorial · macrostructure: Marquee Hero · theme: custom · enrichment: E-photo · nav: N6 · footer: Ft1
 * vibe: "barbería de barrio, clara y directa"
 * paper  oklch(97% 0.008 85)   · light band
 * accent oklch(52% 0.110 78)   · warm (gold, hue 78)
 * display Jost (Futura-like, roman) · body IBM Plex Sans
 * axes: paper-band=light · display-style=geometric-sans · accent-hue=warm
 * rev 2 — corrige: demasiado oscuro, display sobredimensionado, serif no deseada, hero sin foto
 */

:root {
  /* ---- Claro (el grueso de la página) ---- */
  --color-paper:      oklch(97% 0.008 85);   /* crema, nunca #fff */
  --color-paper-2:    oklch(94% 0.010 85);
  --color-paper-3:    oklch(90% 0.011 85);
  --color-rule:       oklch(84% 0.012 85);
  --color-neutral:    oklch(48% 0.013 70);
  --color-muted:      oklch(38% 0.013 65);
  --color-ink:        oklch(20% 0.014 60);   /* carbón cálido, nunca #000 */

  /* ---- Oscuro (solo hero y footer) ---- */
  --color-dark:       oklch(19% 0.013 70);
  --color-dark-2:     oklch(24% 0.013 70);
  --color-dark-rule:  oklch(34% 0.013 70);
  --color-on-dark:    oklch(95% 0.008 85);
  --color-on-dark-mut:oklch(78% 0.011 85);

  /* ---- Acento ---- */
  --color-accent:      oklch(52% 0.110 78);  /* oro sobre claro */
  --color-accent-dim:  oklch(44% 0.090 78);
  --color-accent-light:oklch(74% 0.125 82);  /* oro sobre oscuro */
  --color-focus:       oklch(50% 0.150 78);

  /* ---- Typography ---- */
  --font-display: "Jost", ui-sans-serif, "Futura", "Avenir Next", system-ui, sans-serif;
  --font-body:    "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* escala: tercera mayor (1.25) — más contenida que la rev 1 */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1.0625rem;
  --text-md:   1.1875rem;
  --text-lg:   1.375rem;
  --text-xl:   clamp(1.5rem, 2.2vw, 1.875rem);
  --text-2xl:  clamp(1.5rem, 2.6vw, 2rem);
  --text-3xl:  clamp(1.75rem, 3vw, 2.25rem);
  --text-display: clamp(1.75rem, 3.2vw, 2.75rem);  /* rev3: la imagen es la protagonista, el titular acompaña */

  --leading-display: 1.06;
  --leading-tight:   1.18;
  --leading-body:    1.6;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;

  --track-display: -0.02em;
  --track-caps:     0.14em;

  /* ---- Space · escala 4pt ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  2.75rem;
  --space-2xl: 4rem;
  --space-3xl: 5.5rem;

  /* el contenedor aprovecha la pantalla; la prosa mantiene su medida de lectura */
  --page-max:    90rem;
  --page-gutter: clamp(1.25rem, 4vw, 4rem);
  --measure:     60ch;

  --rule-hair:  1px;
  --rule-thick: 2px;

  --radius-sm: 3px;
  --radius-md: 6px;

  /* ---- Neón (encendido del hero) ---- */
  --neon-core:  oklch(88% 0.145 88);   /* filamento: el punto más caliente */
  --neon-glow:  oklch(74% 0.130 82);   /* halo */
  --neon-far:   oklch(58% 0.105 78);   /* derrame lejano sobre la pared */

  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in:     cubic-bezier(0.55, 0.06, 0.68, 0.19);
  --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);
  --dur-fast: 140ms;
  --dur-mid:  260ms;
  --dur-slow: 520ms;
}