/*
 * Design tokens de FaDaSer. Oscuro por defecto; claro si el sistema lo prefiere o si el visitante lo elige
 * (data-theme en <html>, ver assets/js/theme.js). Todos los pares de texto/fondo cumplen WCAG AA (>= 4.5:1).
 * Tipografía: Geist (SIL OFL 1.1), alojada en este dominio: no se carga nada de terceros.
 */

@font-face {
	font-family: "Geist";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/geist-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	color-scheme: dark;

	/* Superficies y texto */
	--color-bg: #09090b;
	--color-surface: #111114;
	--color-surface-alt: #18181c;
	--color-text: #fafafa;
	--color-muted: #a1a1aa;
	--color-border: #27272a;
	--color-border-strong: #3f3f46;

	/* Marca */
	--color-brand: #60a5fa;          /* texto y detalles sobre fondo */
	--color-brand-solid: #2563eb;    /* relleno de botones y logo */
	--color-on-brand-solid: #ffffff;
	--color-on-brand: #ffffff;
	--color-accent: #2dd4bf;
	--color-focus: #93c5fd;
	--color-brand-from: #2c7fff;      /* degradé de marca (título destacado, aurora, resplandor animado) */
	--color-brand-via: #52a2ff;
	--color-brand-to: #00bcff;

	/* Estados */
	--color-ok: #4ade80;
	--color-warn: #fbbf24;
	--color-error: #f87171;
	--color-on-error: #180505;
	--color-on-warn: #1c1300;

	/* Efectos */
	--glow: rgb(37 99 235 / 0.30);
	--glow-soft: rgb(37 99 235 / 0.12);
	--grid-line: rgb(255 255 255 / 0.05);
	--header-bg: rgb(9 9 11 / 0.72);
	--shadow: 0 1px 0 rgb(255 255 255 / 0.04) inset, 0 8px 30px rgb(0 0 0 / 0.35);
	--shadow-btn: 0 0 0 1px rgb(255 255 255 / 0.08) inset, 0 8px 24px rgb(37 99 235 / 0.35);

	--font-sans: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

	--text-sm: 0.875rem;
	--text-base: 1rem;
	--text-lg: 1.125rem;
	--text-xl: 1.375rem;
	--text-2xl: clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem);
	--text-3xl: clamp(2.1rem, 1.4rem + 3vw, 3.5rem);
	--text-hero: clamp(2.5rem, 1.5rem + 5vw, 4.75rem);

	--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: 5rem;
	--space-9: 7.5rem;

	--radius-sm: 0.5rem;
	--radius: 0.875rem;
	--radius-lg: 1.25rem;
	--container: 72rem;
	--container-narrow: 46rem;
	--header-h: 4rem;
}

/* Claro: por preferencia del sistema (si el visitante no eligió otra cosa)... */
@media (prefers-color-scheme: light) {
	:root:not([data-theme="dark"]) {
		color-scheme: light;
		--color-bg: #ffffff;
		--color-surface: #ffffff;
		--color-surface-alt: #f4f4f5;
		--color-text: #09090b;
		--color-muted: #52525b;
		--color-border: #e4e4e7;
		--color-border-strong: #d4d4d8;
		--color-brand: #1d4ed8;
		--color-accent: #0f766e;
		--color-focus: #1d4ed8;
		--color-brand-from: #175dfc;
		--color-brand-via: #2c7fff;
		--color-brand-to: #00a6f4;
		--color-ok: #15803d;
		--color-warn: #a16207;
		--color-error: #b91c1c;
		--color-on-error: #ffffff;
		--color-on-warn: #ffffff;
		--glow: rgb(37 99 235 / 0.16);
		--glow-soft: rgb(37 99 235 / 0.07);
		--grid-line: rgb(9 9 11 / 0.06);
		--header-bg: rgb(255 255 255 / 0.78);
		--shadow: 0 1px 2px rgb(9 9 11 / 0.06), 0 8px 24px rgb(9 9 11 / 0.06);
		--shadow-btn: 0 8px 22px rgb(37 99 235 / 0.28);
	}
}

/* ...o porque el visitante lo eligió. */
:root[data-theme="light"] {
	color-scheme: light;
	--color-bg: #ffffff;
	--color-surface: #ffffff;
	--color-surface-alt: #f4f4f5;
	--color-text: #09090b;
	--color-muted: #52525b;
	--color-border: #e4e4e7;
	--color-border-strong: #d4d4d8;
	--color-brand: #1d4ed8;
	--color-accent: #0f766e;
	--color-focus: #1d4ed8;
	--color-brand-from: #175dfc;
	--color-brand-via: #2c7fff;
	--color-brand-to: #00a6f4;
	--color-ok: #15803d;
	--color-warn: #a16207;
	--color-error: #b91c1c;
	--color-on-error: #ffffff;
	--color-on-warn: #ffffff;
	--glow: rgb(37 99 235 / 0.16);
	--glow-soft: rgb(37 99 235 / 0.07);
	--grid-line: rgb(9 9 11 / 0.06);
	--header-bg: rgb(255 255 255 / 0.78);
	--shadow: 0 1px 2px rgb(9 9 11 / 0.06), 0 8px 24px rgb(9 9 11 / 0.06);
	--shadow-btn: 0 8px 22px rgb(37 99 235 / 0.28);
}