/* Hallmark · tokens · Monólogos sin propina
 * theme: custom · vibe: "playbill de teatro, tinta amarilla, papel periódico"
 * paper-band: dark (L 18%) + light band (L 94%) · display-style: geometric-heavy (Gilroy Heavy, la del logo) · accent-hue: warm (92°)
 */
@font-face {
  font-family: 'Gilroy';
  src: url('../assets/fonts/Gilroy-Heavy.woff2') format('woff2'),
       url('../assets/fonts/Gilroy-Heavy.ttf') format('truetype');
  font-weight: 800 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* — Marca (hex exacto por fidelidad; el resto en OKLCH) — */
  --color-accent: #FFC900;
  --color-accent-lift: oklch(89% 0.165 94);   /* hover */
  --color-accent-press: oklch(80% 0.172 90);  /* active */

  /* — Papeles — */
  --color-paper: oklch(17.5% 0.006 85);       /* tinta base, negro cálido */
  --color-paper-2: oklch(22% 0.007 85);       /* bloque elevado */
  --color-paper-3: oklch(27% 0.008 85);       /* relleno sutil */
  --color-paper-cream: oklch(94.5% 0.016 88); /* banda de papel periódico */

  /* — Texto — */
  --color-ink: oklch(97% 0.004 90);
  --color-ink-2: oklch(76% 0.006 88);
  --color-ink-3: oklch(56% 0.007 88);
  --color-ink-on-accent: oklch(17.5% 0.006 85);
  --color-ink-on-cream: oklch(20% 0.01 60);
  --color-focus: var(--color-accent);
  --color-sold-out: oklch(62% 0.19 25);

  /* — Reglas — */
  --rule-hairline: 1px solid oklch(38% 0.008 85);
  --rule-hairline-cream: 1px solid oklch(80% 0.02 85);
  --rule-heavy: 3px solid var(--color-accent);

  /* — Tipografía — */
  --font-display: 'Gilroy', 'Archivo Black', 'Helvetica Neue', sans-serif; /* la del logo — solo Heavy */
  --font-body: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Martian Mono', ui-monospace, 'SFMono-Regular', monospace;
  /* Gilroy Heavy es geométrica y ancha: la escala baja respecto a una condensada */
  --text-display: clamp(2.75rem, 7.6vw, 7.5rem);
  --text-display-s: clamp(2.25rem, 5.2vw, 4.5rem);
  --text-4xl: clamp(1.75rem, 3.4vw, 2.75rem);
  --text-3xl: clamp(1.5rem, 2.6vw, 2rem);
  --text-2xl: 1.375rem;
  --text-xl: 1.1875rem;
  --text-base: 1rem;
  --text-sm: 0.875rem;
  --text-xs: 0.75rem;
  --text-mono-xs: 0.6875rem;

  /* — Espacio (4pt) — */
  --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px;
  --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px;
  --space-4xl: 96px; --space-5xl: 128px;
  --measure: 62ch;
  --page-max: 1360px;
  --page-pad: clamp(16px, 4vw, 56px);

  /* — Motion — */
  --ease-out: cubic-bezier(.2, .9, .3, 1);
  --ease-in: cubic-bezier(.55, 0, 1, .45);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-1: 120ms; --dur-2: 220ms; --dur-3: 420ms;

  /* — Geometría de marca (del bisel del logo) — */
  --radius-none: 0;
  --chamfer: 14px;
  --clip-banner: polygon(var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer));
}