/* ==========================================================================
   00 · TOKENS — capa de alias semánticos
   --------------------------------------------------------------------------
   REGLA INVIOLABLE: este archivo NO contiene ni un solo valor literal.
   Ningún hex, ningún px, ningún rgba(). Solo alias que apuntan a theme.json.

   Los literales viven ÚNICAMENTE en theme.json, que WordPress convierte en
   --wp--preset--* y --wp--custom--*. Aquí les ponemos nombres cortos y
   semánticos para que el resto del CSS sea legible.

   ── LAS DOS SUPERFICIES ───────────────────────────────────────────────────
   El tema tiene dos mundos visuales:
     · CLARO (editorial)  → blog y artículos.  Es el valor por defecto.
     · OSCURO (marketing) → home, landings, cabecera y pie.

   No se escriben dos versiones de cada componente. Se escriben UNA VEZ
   usando los alias semánticos (--c-bg, --c-text, --c-border…), y la clase
   `.is-dark` reasigna esos alias. Un componente colocado dentro de un
   contenedor `.is-dark` se adapta solo.

       <section class="is-dark">   ← todo lo de dentro se vuelve oscuro
         <article class="card">…</article>   ← mismo CSS, otro aspecto
       </section>

   Lo que NO se voltea: el naranja de acción (--c-cta) es idéntico en ambas
   superficies. Es el ancla de la marca.
   ========================================================================== */

:root {
	/* ── Marca: verdes ─────────────────────────────────────────────────── */
	--c-forest: var(--wp--preset--color--forest);
	--c-emerald: var(--wp--preset--color--emerald);
	--c-deep: var(--wp--preset--color--deep);
	--c-pine: var(--wp--preset--color--pine);

	/* ── Marca: naranjas (motor de acción) ─────────────────────────────── */
	--c-ember: var(--wp--preset--color--ember);
	--c-amber: var(--wp--preset--color--amber);
	--c-burnt: var(--wp--preset--color--burnt);
	/* Naranja de TINTA: el único con contraste suficiente para texto sobre
	   fondo claro (5,18:1 sobre blanco). Ember se queda en 2,80:1 y no vale
	   para letra. No se usa nunca como fondo. */
	--c-ember-ink: var(--wp--preset--color--ember-ink);

	/* ── Bases oscuras (siempre teñidas de verde, nunca negro puro) ────── */
	--c-night: var(--wp--preset--color--night);
	--c-canopy: var(--wp--preset--color--canopy);

	/* ── Neutros (escala de grises con tinte salvia) ───────────────────── */
	--c-slate: var(--wp--preset--color--slate);
	--c-sage: var(--wp--preset--color--sage);
	/* Salvia de TINTA: la misma idea que Ember Ink. Salvia da 2,69:1 sobre
	   menta y no vale para letra; esta da 5,15:1 (4,68:1 sobre Menta borde). */
	--c-sage-ink: var(--wp--preset--color--sage-ink);
	--c-mint: var(--wp--preset--color--mint);
	--c-mint-mid: var(--wp--preset--color--mint-mid);
	--c-white: var(--wp--preset--color--white);

	/* ── Estados. El éxito reutiliza Emerald: es norma de marca. ───────── */
	--c-success: var(--wp--preset--color--emerald);
	--c-warning: var(--wp--preset--color--warning);
	--c-error: var(--wp--preset--color--error);
	--c-error-text: var(--c-text);

	/* ── Gradientes ────────────────────────────────────────────────────── */
	--g-brand: var(--wp--preset--gradient--brand);
	--g-cta: var(--wp--preset--gradient--cta);
	--g-hero: var(--wp--preset--gradient--hero);
	--g-dual: var(--wp--preset--gradient--dual);

	/* ── Tintes translúcidos ───────────────────────────────────────────── */
	--tint-forest: var(--wp--custom--tint--forest-soft);
	--tint-forest-line: var(--wp--custom--tint--forest-line);
	--tint-ember: var(--wp--custom--tint--ember-soft);
	--tint-ember-line: var(--wp--custom--tint--ember-line);
	--tint-emerald-glow: var(--wp--custom--tint--emerald-glow);
	--tint-emerald-line: var(--wp--custom--tint--emerald-line);
	--tint-warning: var(--wp--custom--tint--warning-soft);
	--tint-warning-line: var(--wp--custom--tint--warning-line);
	--tint-error: var(--wp--custom--tint--error-soft);
	--tint-error-line: var(--wp--custom--tint--error-line);

	/* ── Escala de espaciado (rejilla de 8 px) ─────────────────────────── */
	--space-1: var(--wp--preset--spacing--10);
	--space-2: var(--wp--preset--spacing--20);
	--space-3: var(--wp--preset--spacing--30);
	--space-4: var(--wp--preset--spacing--40);
	--space-5: var(--wp--preset--spacing--50);
	--space-6: var(--wp--preset--spacing--60);
	--space-7: var(--wp--preset--spacing--70);
	--space-8: var(--wp--preset--spacing--80);

	/* ── Tipografía ────────────────────────────────────────────────────── */
	--font-sans: var(--wp--preset--font-family--inter);
	--font-mono: var(--wp--preset--font-family--mono);

	--fs-data: var(--wp--preset--font-size--x-small);
	--fs-small: var(--wp--preset--font-size--small);
	--fs-body: var(--wp--preset--font-size--medium);
	--fs-lead: var(--wp--preset--font-size--large);
	--fs-h3: var(--wp--preset--font-size--x-large);
	--fs-h2: var(--wp--preset--font-size--xx-large);
	--fs-h1: var(--wp--preset--font-size--huge);

	/* ── Geometría ─────────────────────────────────────────────────────── */
	--radius-button: var(--wp--custom--radius--button);
	--radius-card: var(--wp--custom--radius--card);
	--radius-media: var(--wp--custom--radius--media);
	--radius-input: var(--wp--custom--radius--input);
	--radius-badge: var(--wp--custom--radius--badge);
	--radius-pill: var(--wp--custom--radius--pill);

	--w-prose: var(--wp--custom--width--prose);
	--w-article: var(--wp--custom--width--article);
	--w-container: var(--wp--custom--width--container);
	--w-narrow: var(--wp--custom--width--narrow);

	--header-h: var(--wp--custom--header--height);
	--header-h-mobile: var(--wp--custom--header--height-mobile);

	--h-tool-embed: var(--wp--custom--embed--tool-height);

	/* ── Movimiento ────────────────────────────────────────────────────── */
	--t-fast: var(--wp--custom--transition--fast);
	--t-base: var(--wp--custom--transition--base);
	--t-slow: var(--wp--custom--transition--slow);

	--shimmer-duration: var(--wp--custom--shimmer--duration);
	--shimmer-highlight: var(--wp--custom--shimmer--highlight);

	/* ── Desenfoques ───────────────────────────────────────────────────── */
	--blur-orb: var(--wp--custom--blur--orb);
	--blur-glass: var(--wp--custom--blur--glass);

	/* ── Foco (nunca se desactiva) ─────────────────────────────────────── */
	--focus-width: var(--wp--custom--focus--width);
	--focus-offset: var(--wp--custom--focus--offset);

	/* ── Apilamiento ───────────────────────────────────────────────────── */
	--z-header: var(--wp--custom--z--header);
	--z-drawer: var(--wp--custom--z--drawer);
	--z-modal: var(--wp--custom--z--modal);

	/* ── Sombras ───────────────────────────────────────────────────────── */
	--shadow-card: var(--wp--preset--shadow--card);
	--shadow-card-hover: var(--wp--preset--shadow--card-hover);
	--shadow-media: var(--wp--preset--shadow--media);
	--shadow-cta: var(--wp--preset--shadow--cta);
	--shadow-cta-hover: var(--wp--preset--shadow--cta-hover);
	--shadow-dark: var(--wp--preset--shadow--dark);

	/* ══════════════════════════════════════════════════════════════════════
	   ALIAS SEMÁNTICOS — superficie CLARA (por defecto)
	   Usa SIEMPRE estos en el resto del CSS, nunca los de marca de arriba,
	   salvo que el color deba ser el mismo en ambas superficies.
	   ══════════════════════════════════════════════════════════════════════ */
	--c-bg: var(--c-mint);
	--c-bg-raised: var(--c-white);
	--c-bg-sunken: var(--c-mint-mid);

	--c-text: var(--c-slate);
	--c-heading: var(--c-night);
	--c-muted: var(--c-sage-ink);

	/* El naranja cuando es LETRA (antetítulos, insignias). No es el CTA: sobre
	   claro necesita la tinta, y sobre oscuro vuelve a ser Ember. */
	--c-cta-ink: var(--c-ember-ink);

	--c-border: var(--c-mint-mid);
	--c-border-strong: var(--c-sage);

	--c-accent: var(--c-forest);
	--c-accent-hover: var(--c-deep);
	--c-link: var(--c-deep);
	--c-link-hover: var(--c-forest);

	--c-focus: var(--c-forest);

	--shadow-raised: var(--shadow-card);
	--shadow-raised-hover: var(--shadow-card-hover);

	/* Superficie de cristal. En el mundo claro no hay cristal que valga: una
	   capa translúcida sobre menta no se distingue del fondo. Aquí es blanco
	   opaco, y en .is-dark pasa a ser el cristal de verdad. Mismo componente. */
	--c-glass: var(--c-white);

	/* El naranja de acción NO cambia entre superficies. Tampoco su estado de
	   hover: el CTA se invierte a fondo blanco con filo y letra naranja, y se
	   ve igual en el mundo claro y en el oscuro. Es el ancla de la marca. */
	--c-cta: var(--c-ember);
	--c-cta-hover: var(--c-amber);
	--c-cta-text: var(--c-white);
	--c-cta-bg-hover: var(--c-white);
	--c-cta-line-hover: var(--c-burnt);
	--c-cta-text-hover: var(--c-ember-ink);

	/* Velo del modal. Tampoco cambia: el diálogo oscurece la página que hay
	   debajo, sea del color que sea. */
	--c-scrim: var(--wp--custom--dark--scrim);
}

/* ══════════════════════════════════════════════════════════════════════════
   ALIAS SEMÁNTICOS — superficie OSCURA
   Se aplica con la clase `.is-dark` en cualquier contenedor (o en <body>).
   Reasigna únicamente los alias semánticos; nada más se redefine.
   ══════════════════════════════════════════════════════════════════════════ */
.is-dark {
	--c-bg: var(--c-night);
	--c-bg-raised: var(--wp--custom--dark--glass);
	--c-bg-sunken: var(--c-canopy);

	--c-text: var(--wp--custom--dark--text);
	--c-heading: var(--c-white);
	--c-muted: var(--wp--custom--dark--text-muted);

	--c-cta-ink: var(--c-ember);

	--c-border: var(--wp--custom--dark--border);
	--c-border-strong: var(--wp--custom--dark--border-strong);

	--c-accent: var(--c-emerald);
	--c-accent-hover: var(--c-emerald);
	--c-link: var(--c-emerald);
	--c-link-hover: var(--c-amber);

	--c-focus: var(--c-emerald);

	--c-error: var(--wp--preset--color--error-light);
	--c-error-text: var(--wp--preset--color--error-light);
	--tint-error: var(--wp--custom--tint--error-soft-strong);
	--tint-error-line: var(--wp--custom--tint--error-line-strong);

	--c-glass: var(--wp--custom--dark--glass-strong);

	--shadow-raised: var(--shadow-dark);
	--shadow-raised-hover: var(--shadow-dark);
}

/* Variante oscura sólida: tarjetas opacas en vez de cristal translúcido.
   Útil cuando debajo hay un orbe difuminado que ensuciaría la lectura. El modal
   la lleva siempre: flota sobre la página y esta se transparentaría. */
.is-dark.is-solid,
.is-dark .is-solid,
.is-dark dialog.modal {
	--c-bg-raised: var(--c-canopy);
}

/* La superficie oscura pinta su propio fondo y color de texto.
   Sin esto habría que repetir background/color en cada sección. */
.is-dark {
	background-color: var(--c-bg);
	color: var(--c-text);
}