/**
 * SwiftFind — Capa de tokens (design tokens) y declaración de capas.
 *
 * Define el ORDEN de la cascada con @layer y publica todos los tokens del
 * sistema bajo la raíz `.wvn-search-app`. Ningún valor cromático/tipográfico
 * vive fuera de aquí: los componentes solo consumen var(--wvn-*).
 *
 * Equivalencias 1:1 con el legacy VOLT (sin cambios visuales):
 *   --bg → --wvn-color-bg, --accent → --wvn-color-accent, etc.
 */

/* Orden de capas (de menor a mayor prioridad). */
@layer wvn-reset, wvn-tokens, wvn-components, wvn-utilities, wvn-overrides;

@layer wvn-tokens {
	.wvn-search-app {
		/* ---------------------------------------------------------------
		 * Color — BASES editables.
		 * El usuario solo controla estas dos superficies + ink + accent.
		 * Todos los niveles intermedios se DERIVAN abajo con color-mix,
		 * para que las capas (fondo / tarjeta / banner / popover) se
		 * separen siempre, sea el tema claro u oscuro.
		 * --------------------------------------------------------------- */
		--wvn-color-bg: #f6f6f4;       /* fondo base (nivel 0)            */
		--wvn-color-surface: #ffffff;  /* superficie principal (nivel 1) */
		--wvn-color-ink: #0d0d0d;      /* tinta / texto principal        */
		--wvn-color-accent: #d4ff3a;
		--wvn-color-hot: #ff4d2e;

		/* ---------------------------------------------------------------
		 * Escala de ELEVACIÓN derivada (no editable directamente).
		 * La elevación mezcla la superficie hacia la LUZ del tema
		 * (--wvn-color-lift). En tema claro la luz es blanca y casi no
		 * cambia; en tema oscuro DesignSettings la pone clara, de modo que
		 * cada peldaño se aclara y las capas (tarjeta/banner/popover) se
		 * separan SIEMPRE, sin depender del color exacto que elija el user.
		 * --------------------------------------------------------------- */
		--wvn-color-lift: #ffffff;  /* color hacia el que “sube” la elevación */
		--wvn-elev-1: 5%;
		--wvn-elev-2: 9%;
		--wvn-elev-3: 14%;
		--wvn-color-surface-1: var(--wvn-color-surface);
		--wvn-color-surface-2: color-mix(in srgb, var(--wvn-color-lift) var(--wvn-elev-1), var(--wvn-color-surface));
		--wvn-color-surface-3: color-mix(in srgb, var(--wvn-color-lift) var(--wvn-elev-2), var(--wvn-color-surface));
		--wvn-color-sunken:    color-mix(in srgb, var(--wvn-color-ink) var(--wvn-elev-1), var(--wvn-color-bg));

		/* Texto derivado en peldaños de opacidad sobre la tinta. */
		--wvn-color-ink-2: color-mix(in srgb, var(--wvn-color-ink) 82%, var(--wvn-color-surface));
		--wvn-color-muted: color-mix(in srgb, var(--wvn-color-ink) 55%, var(--wvn-color-surface));
		--wvn-color-faint: color-mix(in srgb, var(--wvn-color-ink) 38%, var(--wvn-color-surface));

		/* Líneas/bordes derivados — mezclan hacia la LUZ, así son visibles
		   tanto en superficies claras como oscuras. */
		--wvn-color-line:   color-mix(in srgb, var(--wvn-color-lift) 14%, var(--wvn-color-surface));
		--wvn-color-line-2: color-mix(in srgb, var(--wvn-color-lift) 24%, var(--wvn-color-surface));

		/* Derivados de marca. */
		--wvn-color-accent-hover: color-mix(in srgb, var(--wvn-color-ink) 10%, var(--wvn-color-accent));
		--wvn-color-on-ink: var(--wvn-color-surface);

		/* Spotlight: bloque de ALTO CONTRASTE (banner destacado, CTA oscuro).
		   Siempre oscuro con texto claro, independientemente del tema, para
		   que destaque sobre las superficies normales. En tema oscuro se separa
		   subiendo un peldano respecto al fondo. */
		--wvn-color-spotlight: #15150f;
		--wvn-color-on-spotlight: #ffffff;

		/* Tipografía */
		--wvn-font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
		--wvn-font-body: "Inter", system-ui, sans-serif;
		--wvn-font-mono: ui-monospace, Menlo, monospace;
		--wvn-text-base: 14px;
		--wvn-leading: 1.45;
		--wvn-tracking-tight: -0.02em;
		--wvn-tracking-caps: 0.06em;

		/* Radios */
		--wvn-radius-card: 12px;
		--wvn-radius-lg: 18px;
		--wvn-radius-sm: 8px;
		--wvn-radius-pill: 999px;

		/* Espaciado (escala) */
		--wvn-space-1: 4px;
		--wvn-space-2: 6px;
		--wvn-space-3: 8px;
		--wvn-space-4: 12px;
		--wvn-space-5: 14px;
		--wvn-space-6: 18px;
		--wvn-space-7: 24px;
		--wvn-space-8: 28px;
		--wvn-space-9: 32px;

		/* Elevación */
		--wvn-shadow-card: 0 2px 8px rgba(0, 0, 0, .06);
		--wvn-shadow-pop: 0 16px 40px -16px rgba(0, 0, 0, .18);
		--wvn-shadow-float: 0 18px 40px -16px rgba(0, 0, 0, .4);

		/* Controles */
		--wvn-control-h: 48px;
		--wvn-z-modal: 1000;
		--wvn-z-toast: 1100;

		/* Base de fuente del contenedor */
		font-family: var(--wvn-font-body);
		font-size: var(--wvn-text-base);
		line-height: var(--wvn-leading);
		color: var(--wvn-color-ink);
		-webkit-font-smoothing: antialiased;
	}
}