/*
 * TOKENS — la identidad visual completa del sitio vive aquí.
 *
 * Un child theme cambia de marca sobrescribiendo este fichero (o solo
 * :root). El resto del CSS consume tokens, nunca valores literales.
 * Colores en OKLCH: variantes hover/active = mover lightness, no inventar hex.
 */

:root {
	/* ---- Color: superficie y texto -------------------------------- */
	--color-base: oklch(100% 0 0);
	--color-surface: oklch(97.5% 0.004 250);
	--color-ink: oklch(24% 0.03 255);
	--color-ink-soft: oklch(46% 0.025 255);
	--color-line: oklch(90% 0.008 250);

	/* ---- Color: marca --------------------------------------------- */
	--color-primary: oklch(38% 0.075 255);
	--color-primary-hover: oklch(32% 0.07 255);
	--color-primary-strong: oklch(26% 0.055 255);
	--color-accent: oklch(80% 0.14 80);
	--color-accent-hover: oklch(74% 0.14 80);

	/* ---- Color: sobre fondos oscuros ------------------------------ */
	--color-on-dark: oklch(98% 0.005 250);
	--color-on-dark-soft: oklch(82% 0.015 250);

	/* ---- Color: texto sobre rellenos de marca ---------------------- */
	/* on-primary varía con el tema (primary se aclara en oscuro);     */
	/* on-accent es fijo: el ámbar es claro en ambos temas.            */
	--color-on-primary: oklch(98% 0.005 250);
	--color-on-accent: oklch(24% 0.03 255);

	/* ---- Color: semánticos de formulario -------------------------- */
	--color-success: oklch(55% 0.13 155);
	--color-error: oklch(52% 0.17 25);

	/* ---- Tipografía ------------------------------------------------ */
	--font-text: 'Inter', system-ui, -apple-system, sans-serif;
	--font-display: var(--font-text); /* los child añaden su display propia */

	--text-sm: clamp(0.85rem, 0.82rem + 0.15vw, 0.9rem);
	--text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
	--text-lg: clamp(1.15rem, 1.08rem + 0.35vw, 1.3rem);
	--text-xl: clamp(1.35rem, 1.22rem + 0.65vw, 1.7rem);
	--text-2xl: clamp(1.7rem, 1.45rem + 1.2vw, 2.3rem);
	--text-3xl: clamp(2.1rem, 1.7rem + 2vw, 3.1rem);
	--text-display: clamp(2.5rem, 1.9rem + 3vw, 4.2rem);

	--leading-tight: 1.15;
	--leading-snug: 1.35;
	--leading-base: 1.6;

	--weight-regular: 400;
	--weight-medium: 500;
	--weight-semibold: 600;
	--weight-bold: 700;

	/* ---- Espaciado (base 8) ---------------------------------------- */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-7: 3rem;
	--space-8: clamp(3rem, 2.4rem + 3vw, 5rem);
	--space-section: clamp(4rem, 3rem + 5vw, 7rem);

	/* ---- Layout ----------------------------------------------------- */
	--width-prose: 42rem;
	--width-site: 75rem;
	--gutter: clamp(1rem, 0.7rem + 1.5vw, 2rem);

	/* ---- Forma y elevación ------------------------------------------ */
	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-lg: 16px;
	--shadow-card: 0 1px 2px oklch(24% 0.03 255 / 0.06), 0 8px 24px oklch(24% 0.03 255 / 0.08);

	/* ---- Movimiento -------------------------------------------------- */
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--duration-fast: 150ms;
	--duration-base: 250ms;

	/* ---- Capas -------------------------------------------------------- */
	--z-header: 100;
	--z-nav-panel: 90;
	--z-skip-link: 200;
	--z-progress: 300;

	color-scheme: light;
}

/*
 * MODO OSCURO — re-mapeo de los tokens semánticos, nada más.
 * El atributo lo pone el script anti-FOUC de inc/dark-mode.php
 * (resuelve la preferencia guardada o la del sistema).
 */
[data-theme='dark'] {
	color-scheme: dark;

	--color-base: oklch(19% 0.018 255);
	--color-surface: oklch(23% 0.02 255);
	--color-ink: oklch(93% 0.008 250);
	--color-ink-soft: oklch(72% 0.015 250);
	--color-line: oklch(32% 0.018 255);

	/* primary se aclara para mantener contraste sobre fondos oscuros */
	--color-primary: oklch(74% 0.085 250);
	--color-primary-hover: oklch(80% 0.08 250);
	--color-primary-strong: oklch(15% 0.018 255);
	--color-on-primary: oklch(20% 0.03 255);

	--shadow-card: 0 1px 2px oklch(0% 0 0 / 0.4), 0 10px 28px oklch(0% 0 0 / 0.45);
}