/*
 * Tokens de estilo-SKILL.md (v2 Mangahaus) — copia literal del bloque "Quick Start".
 * No editar a mano: cualquier valor que no esté aquí vive en tokens-derived.css.
 */
:root {
  /* Colores */
  --color-cream: #F5EEDC;
  --color-ink: #141414;
  --color-yellow: #F5CA3D;
  --color-red: #D64433;
  --color-cream-muted: rgba(245, 238, 220, 0.6);
  --color-cream-line: rgba(245, 238, 220, 0.2);

  /* Tipografía — familias */
  --font-display: 'Archivo Black', 'Bungee', 'Arial Black', sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-stamp: 'Special Elite', ui-monospace, 'Courier New', monospace;

  /* Tipografía — escala */
  --text-display-hero: 72px;
  --leading-display-hero: 0.9;
  --text-display-section: 60px;
  --text-display-card: 24px;
  --tracking-display: -0.02em;
  --text-body: 16px;
  --text-small: 14px;
  --text-stamp: 12px;
  --tracking-stamp: 0.3em;
  --tracking-nav: 0.05em;

  /* Espaciado */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-56: 56px;
  --spacing-64: 64px;

  /* Layout */
  --page-max-width: 1400px;
  --page-gutter: 32px;

  /* Bordes y radios */
  --border-keyline: 3px solid var(--color-ink);
  --border-progress: 2px solid var(--color-ink);
  --radius-none: 0px;
  --radius-pill: 999px;
  --radius-tooltip: 18px;

  /* Sombras duras */
  --shadow-offset: 4px 4px 0 0 var(--color-ink);
  --shadow-offset-lg: 6px 6px 0 0 var(--color-ink);
  --shadow-offset-red: 4px 4px 0 0 var(--color-red);
  --shadow-offset-sm: 3px 3px 0 0 var(--color-ink);
  --shadow-pressed: 2px 2px 0 0 var(--color-ink);
  --shadow-shelf: 0 6px 0 var(--color-ink);

  /* Semitono */
  --halftone-on-light: radial-gradient(circle, var(--color-ink) 1.2px, transparent 1.5px);
  --halftone-on-cream: radial-gradient(circle, var(--color-ink) 1px, transparent 1.5px);
  --halftone-on-dark: radial-gradient(circle, var(--color-cream) 1px, transparent 1.5px);
  --halftone-size-sm: 10px;
  --halftone-size-md: 12px;
  --halftone-size-lg: 14px;
  --hatch: repeating-linear-gradient(45deg, transparent 0 6px, rgba(20, 20, 20, 0.15) 6px 8px);

  /* Movimiento */
  --motion-marquee: 50s;
  --motion-wiggle: 0.5s;
  --motion-hover: 0.25s;
  --motion-tooltip: 0.2s;
  --motion-wipe: 0.55s;
  --ease-wipe: cubic-bezier(0.7, 0, 0.2, 1);

  /* Rotaciones decorativas */
  --rotate-tilt-left: -4deg;
  --rotate-tilt-right: 2deg;
}