/* ==========================================================================
   Wizard Trees · Tokens
   --------------------------------------------------------------------------
   Fuente: Figma "CRO wizards" → nodo 16:2 "00 · Fundamentos".
   Todos los valores de este archivo salen de ese nodo. Si un valor cambia en
   Figma, se cambia AQUI y en ningun otro sitio.

   Las tres unicas excepciones estan marcadas con [PS] y son decisiones de
   Palo Seco sobre huecos que el documento de fundamentos no cubre.
   ========================================================================== */

:root {
	color-scheme: dark;

	/* --- Color · superficies ------------------------------------------- */
	--wt-bg:              #0F0F0F; /* Fondo */
	--wt-surface:         #17171A; /* Superficie */
	--wt-raised:          #1E1B26; /* Elevado */

	/* --- Color · marca -------------------------------------------------- */
	--wt-purple-deep:     #5F259F; /* Morado profundo */
	--wt-purple:          #B16AFF; /* Morado claro */
	--wt-purple-mid:      #8848CF; /* parada intermedia del degradado primario */
	--wt-halo:            #3B0379; /* Halo */

	/* --- Color · texto --------------------------------------------------- */
	--wt-text:            #FFFFFF; /* Texto */
	--wt-text-2:          #BBBCBC; /* Texto secundario */
	--wt-text-3:          #77777E; /* Texto terciario */

	/* --- Color · estado de stock ----------------------------------------- */
	--wt-stock-in:        #4ADE80; /* Disponible */
	--wt-stock-low:       #F5A524; /* Ultimas unidades */
	--wt-stock-out:       #F45B5B; /* Agotado */

	/* --- Color · valoracion -----------------------------------------------
	   [PS] El nodo de fundamentos no lo define; sale de las estrellas de la
	   seccion de resenas (35:12). */
	--wt-star:            #F5C24A; /* estrella llena */

	/* --- Color · bordes y velos ------------------------------------------ */
	--wt-border:          #2A2A30;                 /* borde de tarjeta */
	--wt-border-contrast: rgba(255, 255, 255, .35); /* borde boton secundario */
	--wt-fill-subtle:     rgba(255, 255, 255, .06); /* fondo boton terciario */

	/* --- Degradados -------------------------------------------------------
	   El primario es una elipse inscrita exactamente en la caja (radios = mitad
	   del ancho y del alto), de ahi el farthest-side. */
	--wt-grad-primary: radial-gradient(ellipse farthest-side at 50% 50%,
	                     var(--wt-purple)      0%,
	                     var(--wt-purple-mid) 50%,
	                     var(--wt-purple-deep) 100%);
	--wt-grad-halo:    linear-gradient(180deg, #220D39 0%, var(--wt-bg) 100%);
	--wt-grad-veil:    linear-gradient(180deg, rgba(177, 106, 255, .55) 0%, var(--wt-bg) 100%);

	/* --- Tipografia -------------------------------------------------------
	   Monument Extended es de pago y no se sirve desde Figma; el documento la
	   sustituye por Zalando Sans Expanded. Aqui Monument va primero y Zalando
	   queda de respaldo: si los .woff2 de Monument no estan en assets/fonts/,
	   el sitio cae al siguiente ancho equivalente sin romperse. */
	--wt-font-display: "Monument Extended", "Zalando Sans Expanded",
	                   ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
	--wt-font-mono:    "Spline Sans Mono", ui-monospace, SFMono-Regular,
	                   "Cascadia Mono", Menlo, Consolas, monospace;

	--wt-size-display: 4rem;      /* 64 · Display */
	--wt-size-h1:      3rem;      /* 48 · H1 */
	--wt-size-h2:      2rem;      /* 32 · H2 */
	--wt-size-h3:      1.5rem;    /* 24 · H3 */
	--wt-size-body-l:  1.125rem;  /* 18 · Body L */
	--wt-size-body:    1rem;      /* 16 · Body */
	--wt-size-caption: .8125rem;  /* 13 · Caption */
	--wt-size-micro:   .6875rem;  /* 11 · Micro */

	--wt-lh-tight: 1.15; /* valor de Figma, aplicado a toda la escala */
	/* [PS] En Figma cada muestra de la escala es de una sola linea, asi que el
	   1.15 nunca se probo sobre un parrafo. Para texto corrido usamos 1.6. */
	--wt-lh-prose: 1.6;

	/* [PS] El Figma da el tracking en px absolutos (-0.5 para todos los
	   titulares). Un px fijo no es lo mismo a 64 que a 24: -0.5px son -.008em
	   en el Display y -.021em en el H3, o sea que la escala se iba apretando
	   sola segun bajaba de tamano. Aqui va en em, que es como se comporta el
	   tracking de verdad: misma proporcion en toda la escala.

	   Y es POSITIVO, no negativo como el Figma. El motivo: los valores del
	   documento se ajustaron contra Zalando Sans Expanded, que es con lo que
	   Figma sustituye a Monument por ser de pago. Monument Extended tiene
	   otros espaciados laterales y con tracking negativo se apelmaza. El valor
	   lo validó el cliente en pantalla sobre el titular del hero, con la
	   fuente definitiva; se extiende al resto de la escala por coherencia. */
	--wt-track-display: .01em; /* titulares */
	--wt-track-btn:      .3px;   /* etiqueta de boton */
	--wt-track-chip:     .6px;   /* etiqueta de chip */

	--wt-weight-bold: 700;
	--wt-weight-semi: 600;
	--wt-weight-med:  500;
	--wt-weight-reg:  400;

	/* --- Rejilla ----------------------------------------------------------
	   Escritorio 1440 · 12 columnas · margen 80 · medianil 24.
	   Ojo: --wt-container es el ancho TOTAL, margenes incluidos. El contenido
	   util son 1280 (1440 - 80 - 80), que es como estan construidos los frames
	   de pagina 18:3 y 18:13. */
	--wt-container: 1440px;
	--wt-columns:   12;
	--wt-margin:    80px;
	--wt-gutter:    24px;

	/* --- Espaciado · multiplos de 8 --------------------------------------- */
	--wt-space-1:   8px;
	--wt-space-2:  16px;
	--wt-space-3:  24px;
	--wt-space-4:  32px;
	--wt-space-5:  40px;
	--wt-space-6:  48px;
	--wt-space-8:  64px;
	--wt-space-10: 80px;
	--wt-space-12: 96px;
	--wt-space-16: 128px;

	/* --- Radios ------------------------------------------------------------ */
	--wt-radius-card: 14px;
	--wt-radius-pill: 99px;

	/* --- Cabecera · nodo 18:13 ---------------------------------------------
	   104 = 22 de relleno + 60 del logo + 22. Es token porque el desplazamiento
	   de los elementos pegajosos depende de el. */
	--wt-header-h: 104px;

	/* --- Area tactil ------------------------------------------------------- */
	--wt-tap-min:     44px; /* minimo del documento */
	--wt-control-min: 48px; /* altura minima de boton */

	/* --- [PS] Estados y foco ----------------------------------------------
	   El documento de fundamentos no define hover, focus, active ni disabled.
	   Estos valores son una propuesta, no una extraccion. Revisar en diseno. */
	--wt-focus-color:  var(--wt-purple);
	--wt-focus-width:  2px;
	--wt-focus-offset: 3px;
	--wt-disabled-opacity: .45;

	/* --- [PS] Movimiento --------------------------------------------------- */
	--wt-ease: cubic-bezier(.2, 0, 0, 1);
	--wt-dur:  180ms;

	/* --- Capas -------------------------------------------------------------- */
	--wt-z-header:  100;
	--wt-z-overlay: 200;
	--wt-z-modal:   300;
}

/* Margen de rejilla adaptativo. El resto de la escala no cambia. */
@media (max-width: 1200px) {
	:root { --wt-margin: 48px; }
}

@media (max-width: 782px) {
	:root {
		--wt-header-h: 72px;
		--wt-margin: 20px;
		--wt-gutter: 16px;
		--wt-size-display: 2.5rem; /* 40 */
		--wt-size-h1:      2rem;   /* 32 */
		--wt-size-h2:      1.5rem; /* 24 */
		--wt-size-h3:      1.25rem;/* 20 */
	}
}

@media (prefers-reduced-motion: reduce) {
	:root { --wt-dur: 1ms; }
}