/* Hallmark · genre: editorial-técnico · macrostructure: Narrative Workflow · theme: custom "Taller"
 * tone: taller de imprenta, directo y con oficio · anchor hue: bermellón (38)
 * paper band: light · display style: grotesque variable · accent hue: warm
 * Rompe con el crema + verde + serif que se ha vuelto plantilla.
 */

:root {
  /* ---- color · hueso cálido, tinta casi negra, bermellón ---- */
  --color-paper:        oklch(96.5% 0.009 82);
  --color-paper-2:      oklch(93.5% 0.013 80);
  --color-paper-3:      oklch(89% 0.017 78);
  --color-ink:          oklch(19% 0.013 55);
  --color-ink-2:        oklch(37% 0.014 55);
  --color-ink-muted:    oklch(53% 0.013 55);
  --color-rule:         oklch(85% 0.014 78);
  --color-rule-strong:  oklch(60% 0.015 68);

  --color-accent:       oklch(55% 0.185 38);
  --color-accent-deep:  oklch(45% 0.158 36);
  --color-accent-tint:  oklch(93.5% 0.042 48);
  --color-accent-ink:   oklch(37% 0.125 36);
  --color-focus:        oklch(55% 0.185 38);
  --color-error:        oklch(45% 0.17 25);
  --color-error-tint:   oklch(94% 0.032 28);

  /* ---- superficie oscura ---- */
  --color-noche:        oklch(17.5% 0.014 55);
  --color-noche-2:      oklch(23% 0.015 55);
  --color-noche-rule:   oklch(34% 0.014 55);
  --color-noche-ink:    oklch(95% 0.008 82);
  --color-noche-muted:  oklch(72% 0.012 78);
  --color-noche-acento: oklch(72% 0.165 42);

  /* ---- bloque de código ---- */
  --color-code-paper:   oklch(17.5% 0.014 55);
  --color-code-ink:     oklch(93% 0.010 82);
  --color-code-muted:   oklch(62% 0.016 78);
  --color-code-accent:  oklch(76% 0.15 45);

  /* ---- tipografía ---- */
  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* quinta mayor (1.5) en los saltos grandes, cuarta justa abajo */
  --text-xs:        0.75rem;
  --text-sm:        0.8125rem;
  --text-md:        1rem;
  --text-lg:        clamp(1.125rem, 1.04rem + 0.4vw, 1.3125rem);
  --text-xl:        clamp(1.375rem, 1.17rem + 0.95vw, 1.875rem);
  --text-2xl:       clamp(1.875rem, 1.35rem + 2.4vw, 3rem);
  --text-3xl:       clamp(2.5rem, 1.6rem + 4vw, 4rem);
  --text-display-s: clamp(2.75rem, 1.5rem + 5.4vw, 5rem);
  --text-display:   clamp(2.5rem, 1.35rem + 4.1vw, 4.5rem);
  --text-numeral:   clamp(3.5rem, 2rem + 6.5vw, 7rem);

  --leading-display: 0.94;
  --leading-tight:   1.1;
  --leading-body:    1.6;

  /* ---- espacio · 4pt ---- */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6.5rem;
  --space-4xl: 10rem;

  --page-gutter: clamp(1.125rem, 4.5vw, 4rem);
  --page-max:    80rem;
  --measure:     60ch;

  /* ---- filetes y esquinas · casi rectas, de imprenta ---- */
  --rule-hair:    1px;
  --rule-medium:  2px;
  --rule-thick:   5px;
  --radius-input: 0.125rem;
  --radius-btn:   0.125rem;
  --radius-fig:   0.1875rem;

  /* ---- movimiento ---- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-instant: 80ms;
  --dur-short:   160ms;
  --dur-mid:     320ms;
  --dur-long:    640ms;

  --z-base:  0;
  --z-raise: 10;
  --z-nav:   100;
}