/* ==========================================================================
   DATAVIDENCE · Design tokens
   Capa 1 · primitivos  →  el valor crudo (hex del imagotipo vectorizado)
   Capa 2 · semánticos  →  el rol que consumen los componentes
   Capa 3 · WordPress   →  theme.json apunta sus presets a estos semánticos

   theme.json es la fuente de los tamaños tipográficos y del espaciado
   (--wp--preset--*); aquí solo se crean alias con los nombres del kit.
   Este archivo solo declara custom properties: se carga también en el
   admin para que las muestras de color del editor se vean correctamente.
   ========================================================================== */

:root {
	/* ---- 1 · Primitivos · color ---- */
	--c-emerald: #167452;
	--c-teal: #138a82;
	--c-teal-deep: #0f7a72;
	--c-teal-press: #0c5f59;
	--c-navy: #1c3870;
	--c-grey: #606062;
	--c-mint: #34c79b;
	--c-teal-bright: #2fb0a6;
	--c-white: #ffffff;
	--c-paper: #f4f4f1;
	--c-ink-dark: #1c1c1d;

	/* ---- 2 · Semánticos · color (modo claro) ---- */
	color-scheme: light;
	--color-bg: var(--c-white);
	--color-surface: var(--c-paper);
	--color-card: var(--c-white);
	--color-heading: var(--c-navy);          /* 11.4:1 */
	--color-ink: var(--c-navy);              /* 11.4:1 */
	--color-ink-muted: #3a4252;              /* cuerpo de tarjetas y callouts */
	--color-ink-soft: var(--c-grey);         /* 6.3:1 · metadatos */
	--color-icon-soft: #909094;              /* solo iconos decorativos */
	--color-accent: var(--c-emerald);        /* 5.8:1 · enlaces, CTA */
	--color-accent-hover: var(--c-teal-deep);/* 5.2:1 */
	--color-accent-active: var(--c-teal-press);
	--color-accent-2: var(--c-teal);         /* 4.2:1 · solo UI / texto grande */
	--color-on-accent: var(--c-white);
	--color-accent-tint: rgb(22 116 82 / 0.08);
	--color-accent-tint-strong: rgb(22 116 82 / 0.16);
	--color-border: #e6e6e2;
	--color-border-soft: #f0f0ec;
	--color-border-strong: #d6d6d0;
	--color-divider: rgb(28 56 112 / 0.12);
	--color-disabled: #a9b0a5;
	--color-selection: rgb(22 116 82 / 0.16);
	--color-header-bg: rgb(255 255 255 / 0.84);
	--color-overlay: rgb(28 56 112 / 0.28);

	/* Secciones y pie en navy (iguales en ambos modos) */
	--color-inverse-bg: var(--c-navy);
	--color-inverse-heading: var(--c-white);
	--color-inverse-ink: #cdd6e6;
	--color-inverse-accent: var(--c-mint);
	--color-inverse-border: rgb(255 255 255 / 0.14);

	/* Estados de formulario (señales funcionales, no de marca) */
	--color-error: #b3261e;
	--color-error-tint: rgb(179 38 30 / 0.08);
	--color-success: var(--c-emerald);
	--color-success-tint: rgb(22 116 82 / 0.08);

	/* Niveles de curso: progresión esmeralda → teal-deep → navy */
	--level-1: var(--c-emerald);
	--level-2: var(--c-teal-deep);
	--level-3: var(--c-navy);

	/* Imagotipo (en modo oscuro y sobre navy pasa a su versión negativa) */
	--logo-emerald: var(--c-emerald);
	--logo-teal: var(--c-teal);
	--logo-navy: var(--c-navy);
	--logo-grey: var(--c-grey);

	/* ---- Tipografía ---- */
	--font-display: var(--wp--preset--font-family--serif, "IBM Plex Serif", Georgia, serif);
	--font-body: var(--wp--preset--font-family--sans, "IBM Plex Sans", system-ui, sans-serif);
	--font-mono: var(--wp--preset--font-family--mono, "IBM Plex Mono", ui-monospace, monospace);

	--fs-display: var(--wp--preset--font-size--display, clamp(2.5rem, 1.98rem + 2.3vw, 3.815rem));
	--fs-h1: var(--wp--preset--font-size--h1, clamp(2.125rem, 1.76rem + 1.6vw, 3.052rem));
	--fs-h2: var(--wp--preset--font-size--h2, clamp(1.75rem, 1.48rem + 1.2vw, 2.441rem));
	--fs-h3: var(--wp--preset--font-size--h3, clamp(1.4rem, 1.18rem + 0.96vw, 1.953rem));
	--fs-h4: var(--wp--preset--font-size--h4, clamp(1.2rem, 1.06rem + 0.63vw, 1.563rem));
	--fs-lead: var(--wp--preset--font-size--lead, 1.25rem);
	--fs-body: var(--wp--preset--font-size--body, 1rem);
	--fs-small: var(--wp--preset--font-size--small, 0.8rem);
	--fs-overline: 0.8rem;
	--fs-meta: 0.75rem;
	--fs-button: 0.9375rem;
	--fs-code: 0.875rem;

	--lh-tight: 1.1;
	--lh-snug: 1.3;
	--lh-body: 1.65;
	--tracking-display: -0.02em;
	--tracking-overline: 0.16em;

	/* ---- Espaciado · base 4px (presets de theme.json) ---- */
	--space-3xs: var(--wp--preset--spacing--10, 0.25rem);
	--space-2xs: var(--wp--preset--spacing--20, 0.5rem);
	--space-xs: var(--wp--preset--spacing--30, 0.75rem);
	--space-sm: var(--wp--preset--spacing--40, 1rem);
	--space-md: var(--wp--preset--spacing--50, 1.25rem);
	--space-lg: var(--wp--preset--spacing--60, 1.5rem);
	--space-xl: var(--wp--preset--spacing--70, 2rem);
	--space-2xl: var(--wp--preset--spacing--80, 3rem);
	--space-3xl: var(--wp--preset--spacing--90, 4rem);
	--space-4xl: var(--wp--preset--spacing--100, 4.5rem);
	--space-section: var(--wp--preset--spacing--section, clamp(3rem, 2rem + 5vw, 6rem));
	--gutter: clamp(1rem, 4vw, 2rem);

	/* ---- Contenedores ---- */
	--container-prose: 45rem;   /* ~70 caracteres por línea */
	--container-mid: 58.125rem; /* 930px, la medida heredada de al-folio */
	--container-wide: 75rem;
	--header-h: 4.25rem;

	/* ---- Radios (nada más redondeado que 6px salvo pills) ---- */
	--radius-chip: 3px;
	--radius-control: 4px;
	--radius-card: 6px;
	--radius-pill: 999px;

	/* ---- Sombras · entintadas en navy ---- */
	--shadow-sm: 0 1px 3px rgb(28 56 112 / 0.06);
	--shadow-md: 0 4px 12px rgb(28 56 112 / 0.1);
	--shadow-lg: 0 10px 30px rgb(28 56 112 / 0.14);
	--shadow-accent: 0 2px 8px rgb(15 122 114 / 0.33);
	--ring-focus: 0 0 0 3px rgb(22 116 82 / 0.27);
	--outline-focus: 2px solid var(--color-accent);

	/* ---- Movimiento ---- */
	--ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--dur-fast: 150ms;
	--dur-base: 250ms;
	--dur-slow: 400ms;
	--dur-reveal: 700ms;
	--reveal-distance: 1rem;
	--stagger: 80ms;

	/* ---- Capas ---- */
	--z-header: 100;
	--z-nav: 90;
	--z-skip: 1000;
}

/* ---- Modo oscuro · el script de <head> fija data-theme antes del render ---- */
:root[data-theme="dark"] {
	color-scheme: dark;
	--color-bg: var(--c-ink-dark);
	--color-surface: #232325;
	--color-card: #27272a;
	--color-heading: #eef1f6;
	--color-ink: #e6e6e2;                    /* 13.7:1 sobre #1c1c1d */
	--color-ink-muted: #cdd0d6;
	--color-ink-soft: #a9a9ad;               /* 7.3:1 */
	--color-icon-soft: #8a8a8f;
	--color-accent: var(--c-mint);           /* 7.9:1 */
	--color-accent-hover: var(--c-teal-bright); /* 6.4:1 */
	--color-accent-active: #5fd4b0;
	--color-accent-2: var(--c-teal-bright);
	--color-on-accent: var(--c-ink-dark);
	--color-accent-tint: rgb(52 199 155 / 0.1);
	--color-accent-tint-strong: rgb(52 199 155 / 0.18);
	--color-border: #36363a;
	--color-border-soft: #2e2e31;
	--color-border-strong: #46464b;
	--color-divider: rgb(255 255 255 / 0.1);
	--color-disabled: #4a4d4a;
	--color-selection: rgb(52 199 155 / 0.25);
	--color-header-bg: rgb(28 28 29 / 0.82);
	--color-overlay: rgb(0 0 0 / 0.5);
	--color-inverse-bg: #172e5c;
	--color-error: #f2857c;
	--color-error-tint: rgb(242 133 124 / 0.1);
	--color-success-tint: rgb(52 199 155 / 0.1);

	--level-1: var(--c-mint);
	--level-2: var(--c-teal-bright);
	--level-3: #8fa7d8;

	--logo-emerald: var(--c-white);
	--logo-teal: var(--c-white);
	--logo-navy: var(--c-white);
	--logo-grey: var(--c-white);

	--shadow-sm: 0 1px 3px rgb(0 0 0 / 0.3);
	--shadow-md: 0 4px 12px rgb(0 0 0 / 0.35);
	--shadow-lg: 0 10px 30px rgb(0 0 0 / 0.45);
	--shadow-accent: 0 2px 10px rgb(52 199 155 / 0.3);
	--ring-focus: 0 0 0 3px rgb(52 199 155 / 0.35);
}

/* ---- Movimiento reducido: todas las duraciones a cero ---- */
@media (prefers-reduced-motion: reduce) {
	:root {
		--dur-fast: 0ms;
		--dur-base: 0ms;
		--dur-slow: 0ms;
		--dur-reveal: 0ms;
		--reveal-distance: 0px;
		--stagger: 0ms;
	}
}