/**
 * Design tokens — CSS custom properties.
 * Source of truth: the approved design-system doc. Keep theme.json's
 * palette/typography settings in sync with this file by hand whenever
 * either changes — theme.json drives the block editor, this file
 * drives everything else.
 *
 * Dark is the only theme (no light/toggle) — the dark palette is the
 * single default here, not a conditional override.
 */

:root {
	/* ---------------------------------------------------------------
	 * Color — dark (only mode)
	 * ------------------------------------------------------------- */
	--color-primary: #5b82ff;
	--color-primary-hover: #7a9aff;
	--color-primary-tint: #16223f;
	--color-secondary: #e6eaf2;
	--color-accent: #2fdfc9;
	--color-accent-tint: #0f2a28;
	--color-bg: #0b1220;
	--color-surface: #111a2b;
	--color-border: #223049;
	--color-border-strong: #2e3f5c;
	--color-text: #e6eaf2;
	--color-text-muted: #9aa7bd;
	--color-text-faint: #6b7a94;
	--color-success: #12b76a;
	--color-warning: #f79009;
	--color-danger: #f04438;
	--color-on-primary: #ffffff;
	--color-on-secondary: #0b1220;

	/* ---------------------------------------------------------------
	 * Typography
	 *
	 * NOTE: the actual Inter / Plus Jakarta Sans font FILES could not
	 * be fetched in this build environment (both the npm and apt
	 * package registries used to self-host them returned 403s, and
	 * routing around that with a direct curl to a font CDN would
	 * violate the same restriction WebFetch enforces — so it wasn't
	 * done). The stack below leads with those family names, then
	 * falls through to each platform's native UI font (San Francisco
	 * on Apple, Segoe UI on Windows, Roboto on Android/Chrome OS).
	 * That fallback chain renders instantly with zero network request
	 * and zero font-swap layout shift, so nothing is broken or
	 * degraded visually in the meantime — and the moment real woff2
	 * files are added (see fonts.css), the named fonts activate
	 * automatically with no other change needed.
	 * ------------------------------------------------------------- */
	--font-heading: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--text-display: clamp(2.25rem, 1.2rem + 4vw, 3.75rem);
	--text-h1: clamp(1.875rem, 1.2rem + 2.5vw, 2.75rem);
	--text-h2: clamp(1.5rem, 1.1rem + 1.5vw, 2rem);
	--text-h3: clamp(1.25rem, 1.05rem + 0.8vw, 1.5rem);
	--text-h4: 1.125rem;
	--text-body-lg: 1.125rem;
	--text-body: 1rem;
	--text-sm: 0.875rem;
	--text-xs: 0.75rem;

	--leading-tight: 1.15;
	--leading-normal: 1.6;

	/* ---------------------------------------------------------------
	 * Spacing scale (4px base unit)
	 * ------------------------------------------------------------- */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--space-8: 64px;
	--space-9: 96px;
	--space-10: 128px;

	/* ---------------------------------------------------------------
	 * Radius / shadow
	 * Shadows are tuned darker/more diffuse than a light-mode scale
	 * would use, since low-opacity black shadows barely read against
	 * a dark surface — these lean on a soft black + a faint cool glow.
	 * ------------------------------------------------------------- */
	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-lg: 16px;
	--radius-full: 999px;

	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
	--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
	--shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);

	/* ---------------------------------------------------------------
	 * Layout
	 * ------------------------------------------------------------- */
	--content-max: 1280px;
	--container-pad: clamp(1rem, 4vw, 3rem);

	/* ---------------------------------------------------------------
	 * Gradient (used sparingly — hero wash, CTA band only)
	 * ------------------------------------------------------------- */
	--gradient-brand: linear-gradient(135deg, #5b82ff 0%, #2fdfc9 100%);
}