/**
 * Design tokens — the single source of truth for color, spacing, type, radius,
 * and shadow. Every other CSS file references these; none should hard-code a
 * raw hex value or px size directly.
 *
 * Breakpoints can't live as custom properties inside @media conditions in plain
 * CSS, so they're documented here and used as literal values in layout.css:
 *   sm: 480px   md: 768px   lg: 1024px   xl: 1280px
 */

:root {
	/* Surfaces — dark navy technology aesthetic */
	--ev-color-bg: #0b1220;
	--ev-color-bg-alt: #101a2c;
	--ev-color-surface: #16223a;
	--ev-color-surface-raised: #1c2c4a;
	--ev-color-border: #22304a;

	/* Text — white/off-white per brief */
	--ev-color-text: #f4f6fb;
	--ev-color-text-muted: #b9c4d6;
	--ev-color-text-on-accent: #0b1220;

	/* Tech accents — cyan/blue, purple intentionally minimized */
	--ev-color-accent-cyan: #38bdf8;
	--ev-color-accent-blue: #3b82f6;

	/*
	 * Light section variants — used to break up pages that would otherwise be
	 * an unbroken run of the dark navy surface. One cool (pairs with cyan/blue),
	 * one warm (pairs with the orange CTA), applied via .ev-section--soft /
	 * .ev-section--cream in layout.css. Each redefines the core text/surface/
	 * accent tokens for everything nested inside it, so components don't need
	 * their own light-mode variants — they just keep using var(--ev-color-*).
	 */
	--ev-color-bg-soft: #eef1fb;
	--ev-color-bg-cream: #f7f4ee;
	--ev-color-text-on-light: #101a2e;
	--ev-color-text-muted-on-light: #4b5566;
	--ev-color-surface-on-light: #ffffff;
	--ev-color-border-on-light-soft: #dde3f2;
	--ev-color-border-on-light-cream: #e8e0d0;
	--ev-color-accent-cyan-on-light: #0369a1;
	--ev-color-accent-blue-on-light: #1d4ed8;

	/* CTAs */
	--ev-color-cta-primary: #ff7a33;
	--ev-color-cta-primary-hover: #e8611b;
	--ev-color-cta-secondary: #14b8a6;
	--ev-color-cta-secondary-hover: #0d9488;

	/* Feedback colors */
	--ev-color-success: #22c55e;
	--ev-color-error: #ef4444;

	/* Spacing scale (rem) */
	--ev-space-2xs: 0.25rem;
	--ev-space-xs: 0.5rem;
	--ev-space-sm: 0.75rem;
	--ev-space-md: 1rem;
	--ev-space-lg: 1.5rem;
	--ev-space-xl: 2.5rem;
	--ev-space-2xl: 4rem;
	--ev-space-3xl: 6rem;

	/* Fluid type scale */
	--ev-font-size-sm: clamp(0.875rem, 0.85rem + 0.1vw, 0.95rem);
	--ev-font-size-base: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
	--ev-font-size-lg: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
	--ev-font-size-xl: clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
	--ev-font-size-2xl: clamp(2rem, 1.5rem + 2vw, 2.9rem);

	--ev-font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--ev-font-family-heading: var(--ev-font-family-base);
	--ev-line-height-base: 1.6;
	--ev-line-height-heading: 1.2;

	/* Radius + shadow */
	--ev-radius-sm: 6px;
	--ev-radius-md: 12px;
	--ev-radius-lg: 20px;
	--ev-radius-xl: 28px;
	--ev-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
	--ev-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
	--ev-shadow-soft: 0 12px 32px rgba(16, 26, 46, 0.12);

	/* Layout */
	--ev-content-max-width: 1200px;
	--ev-transition-fast: 150ms ease;
	--ev-transition-base: 250ms ease;
}