/**
 * Design tokens. Change these to re-skin the entire site.
 *
 * --color-accent is the single value the Customizer's "Brand Color" control
 * writes to (see inc/customizer.php) — it's the "Electric Blue" stop of the
 * 4-stop brand gradient, so changing it there shifts the gradient too.
 * --color-violet / --color-purple / --color-cyan are the fixed bookends and
 * aren't exposed in the Customizer; edit them here for a different gradient
 * family entirely.
 */
:root {
	/* Surfaces — layered deep navy-black, each step slightly lighter */
	--color-bg: #080a12;
	--color-bg-elevated: #0d111c;
	--color-surface: #121827;
	--color-surface-hover: #161d2d;
	--color-border: #1e2536;
	--color-border-strong: #2c3550;

	/* Text */
	--color-text: #f5f7fa;
	--color-text-secondary: #a7b0c0;
	--color-text-tertiary: #6f788a;

	/* Accent — the "Electric Blue" stop of the brand gradient. Customizer-controlled. */
	--color-accent: #3b82f6;
	--color-accent-strong: #60a0ff;
	--color-accent-rgb: 59, 130, 246;
	--color-on-accent: #080a12;

	/* Gradient stops — violet → purple → (accent/blue) → cyan */
	--color-violet: #8b5cf6;
	--color-violet-rgb: 139, 92, 246;
	--color-purple: #6366f1;
	--color-purple-rgb: 99, 102, 241;
	--color-cyan: #06b6d4;
	--color-cyan-rgb: 6, 182, 212;

	--gradient-brand: linear-gradient(100deg, var(--color-violet) 0%, var(--color-purple) 35%, var(--color-accent) 68%, var(--color-cyan) 100%);
	--gradient-brand-diagonal: linear-gradient(135deg, var(--color-violet) 0%, var(--color-purple) 35%, var(--color-accent) 68%, var(--color-cyan) 100%);
	--gradient-border: linear-gradient(135deg, rgba(var(--color-violet-rgb), 0.6), rgba(var(--color-purple-rgb), 0.55), rgba(var(--color-accent-rgb), 0.55), rgba(var(--color-cyan-rgb), 0.6));

	/* Semantic */
	--color-selection: rgba(var(--color-accent-rgb), 0.25);

	/* Shadows — soft, low-contrast; depth over drama */
	--shadow-sm: 0 1px 2px rgba(2, 3, 8, 0.5);
	--shadow-md: 0 8px 24px -8px rgba(2, 3, 8, 0.55);
	--shadow-lg: 0 20px 45px -15px rgba(2, 3, 8, 0.6);
	--shadow-glow: 0 0 0 1px rgba(var(--color-accent-rgb), 0.25), 0 12px 32px -12px rgba(var(--color-accent-rgb), 0.35);

	/* Typography */
	--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "Fira Code", Menlo, Consolas, "Liberation Mono", monospace;

	--fs-sm: 0.875rem;
	--fs-base: 1.0625rem;
	--fs-md: 1.1875rem;
	--fs-lg: 1.375rem;
	/* Fluid display sizes — smooth scaling between breakpoints instead of
	   hard jumps, so the hero/section headings always feel intentional. */
	--fs-xl: clamp(1.5rem, 1.4rem + 0.5vw, 1.75rem);
	--fs-2xl: clamp(1.75rem, 1.55rem + 1vw, 2.5rem);
	--fs-3xl: clamp(2.25rem, 1.6rem + 3vw, 3.75rem);

	--lh-tight: 1.25;
	--lh-normal: 1.5;
	--lh-relaxed: 1.75;

	/* Layout */
	--container-max: 1180px;
	--content-max: 700px;
	--header-height: 64px;

	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 12px;

	--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: 4.5rem;
	--space-9: 6rem;

	--transition-fast: 150ms ease;
	--transition-base: 220ms ease;
}