/* ============================================================
   01 · TOKENS — única fuente de verdad del sistema visual
   Manual de Marca v2.0 · Brandbook Digital
   ------------------------------------------------------------
   Jerarquía cromática: negro 60% · blanco 30% · neón 10%.
   LA MARCA ES ANGULAR: radio 0 en todo, salvo pills y avatares.
   No depender del logo: puede cambiar. Los tokens, no.
   ------------------------------------------------------------
   Los tokens canónicos van prefijados --yk-*. Al final hay una
   capa de ALIAS sin prefijo porque el brandbook los usa así.
   Los alias NO son la fuente de verdad: apuntan a los --yk-*.
   ============================================================ */

:root {
	/* —— Color —— */
	--yk-ink:        #000000;               /* Ink Black · negro puro · pie y cabecera */
	--yk-night:      #0a0a0c;               /* lienzo del ambiente "Tokio Nocturno" */
	--yk-paper:      #ffffff;               /* Bone White · texto / aire · 30% */
	--yk-neon:       #ff009c;               /* Neon Yokai · descarga eléctrica · 10% */
	--yk-card:       #0c0c0c;               /* superficies de contenido */
	--yk-card-2:     #141414;               /* estado activo / hover */
	--yk-line:       rgba(255, 255, 255, .12);
	--yk-line-2:     rgba(255, 255, 255, .06);
	--yk-grid:       rgba(255, 255, 255, .06);   /* malla blueprint */
	--yk-mute:       rgba(255, 255, 255, .55);
	--yk-mute-2:     rgba(255, 255, 255, .52);   /* v5.6: era .38 → medía 3.53:1 sobre --yk-card y
	                                                 3.38:1 sobre una pastilla en --yk-neon-soft, por
	                                                 debajo del 4.5:1 AA para texto normal, en los tres
	                                                 sitios donde se usa como texto legible (.yk-crumbs,
	                                                 el pie de .yk-review, .yk-facts dt). Subido a .52 →
	                                                 5.69:1 sobre card y 5.29:1 sobre la pastilla rosa;
	                                                 pasa AA con margen en los dos casos. --yk-mute (.55)
	                                                 NO tenía este problema — 6.26:1 sobre card — y se
	                                                 queda como estaba. */
	--yk-neon-soft:  rgba(255, 0, 156, .18);
	--yk-neon-glow:  rgba(255, 0, 156, .55);
	--yk-cyan:       #00ffe1;               /* SOLO para el desfase glitch */
	--yk-good:       #00ff9c;
	--yk-bad:        #ff4040;
	--yk-warn:       #ffb000;
	--yk-whatsapp:   #25d366;               /* CTA reserva */

	/* —— Tipografía ——
	   Poppins display/titulares · Roboto texto · Roboto Mono metadatos.
	   ACCESIBILIDAD (WCAG AA): el neón NUNCA sobre blanco en texto corrido.
	   Pares aprobados: blanco/negro · negro/blanco · neón/negro (6.8:1).
	   Por eso .yk-btn--primary lleva texto NEGRO sobre neón, no blanco. */
	--yk-f-display: 'Poppins', system-ui, sans-serif;
	--yk-f-text:    'Roboto', system-ui, sans-serif;
	--yk-f-mono:    'Roboto Mono', ui-monospace, monospace;

	--yk-type-display: clamp(64px, 12vw, 220px);
	--yk-type-h1:      clamp(48px, 8vw, 120px);
	--yk-type-h2:      clamp(28px, 3.2vw, 48px);
	--yk-type-h3:      22px;
	--yk-type-body:    17px;   /* v5.5: +1px, se veía pequeño en PC. Se propaga a todo el sitio */
	--yk-type-small:   14px;
	--yk-type-meta:    11px;   /* mono, versaleta, tracking ancho */

	/* —— Escala de espaciado (base 4px) —— */
	--yk-s1: 4px;   --yk-s2: 8px;   --yk-s3: 12px;  --yk-s4: 16px;
	--yk-s5: 24px;  --yk-s6: 32px;  --yk-s7: 48px;  --yk-s8: 64px;
	--yk-s9: 96px;  --yk-s10: 128px;

	/* —— Radios ——
	   Solo existen dos. Si necesitas un tercero, el diseño está mal. */
	--yk-r-0:    0px;
	--yk-r-pill: 999px;   /* SOLO chips, badges y avatares */

	/* —— Glow —— */
	--yk-glow-sm: 0 0 12px var(--yk-neon-glow);
	--yk-glow-md: 0 0 24px var(--yk-neon-glow);
	--yk-glow-lg: 0 0 40px var(--yk-neon-glow), 0 0 80px var(--yk-neon-soft);

	/* —— Movimiento —— */
	--yk-ease:   cubic-bezier(.2, .7, .3, 1);
	--yk-t-fast: .15s;
	--yk-t:      .25s;
	--yk-t-slow: .4s;

	/* —— Layout —— */
	--yk-container:        1600px;   /* v5.4: todas las secciones aprovechan el ancho, footer y header incluidos */
	--yk-container-narrow: 820px;
	--yk-pad-x: clamp(20px, 5vw, 80px);
	--yk-pad-y: clamp(56px, 9vw, 140px);

	/* —— Z-index —— */
	--yk-z-header:   100;
	--yk-z-dropdown: 200;
	--yk-z-sticky:   300;
	--yk-z-drawer:   500;   /* menú móvil: por encima de todo salvo modales */
	--yk-z-modal:    1000;
	--yk-z-fab:      9999;

	/* ============ ALIAS de compatibilidad (no editar) ============ */
	--ink: var(--yk-ink);            --night: var(--yk-night);   --paper: var(--yk-paper);
	--card: var(--yk-card);          --card-2: var(--yk-card-2);
	--neon: var(--yk-neon);          --neon-soft: var(--yk-neon-soft);
	--neon-glow: var(--yk-neon-glow);
	--line: var(--yk-line);          --line-2: var(--yk-line-2);
	--grid: var(--yk-grid);          --cyan: var(--yk-cyan);
	--mute: var(--yk-mute);          --mute-2: var(--yk-mute-2);
	--good: var(--yk-good);          --warn: var(--yk-warn);  --bad: var(--yk-bad);
	--f-display: var(--yk-f-display);
	--f-text: var(--yk-f-text);
	--f-mono: var(--yk-f-mono);
	--glow-sm: var(--yk-glow-sm);    --glow-md: var(--yk-glow-md);  --glow-lg: var(--yk-glow-lg);
	--ease: var(--yk-ease);
	--t: var(--yk-t);                --t-fast: var(--yk-t-fast);    --t-slow: var(--yk-t-slow);
	--r-pill: var(--yk-r-pill);      --r-0: var(--yk-r-0);
	--pad-x: var(--yk-pad-x);        --pad-y: var(--yk-pad-y);
	--s1: var(--yk-s1); --s2: var(--yk-s2); --s3: var(--yk-s3); --s4: var(--yk-s4);
	--s5: var(--yk-s5); --s6: var(--yk-s6); --s7: var(--yk-s7); --s8: var(--yk-s8);
	--s9: var(--yk-s9); --s10: var(--yk-s10);
}