/**
 * Design tokens – single source for colors, typography, spacing, radii.
 * Load first on all public site and configurator pages.
 */
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=Orbitron:wght@400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");

:root {
	/* Core palette */
	--bg: #0a0b0d;
	--panel: rgba(255, 255, 255, 0.08);
	--card: rgba(255, 255, 255, 0.12);
	--card-border: rgba(255, 255, 255, 0.18);
	--text: #e9edf1;
	--muted: #a7b0bb;
	--accent: #00d1ff;
	--cta: #00d1ff;
	--cta-hover: #00b8e6;
	--cta-text: #000000;
	--ring: rgba(0, 209, 255, 0.45);

	/* Backgrounds / gradients */
	--bg-deep: #0a1628;
	--bg-mid: #1a1a2e;
	--header-bg: rgba(10, 11, 13, 0.9);
	--overlay: rgba(0, 0, 0, 0.7);

	/* Accent derivatives */
	--accent-soft: rgba(0, 209, 255, 0.1);
	--accent-muted: rgba(91, 122, 154, 0.15);
	--accent-glow: rgba(0, 209, 255, 0.4);

	/* Semantic / status */
	--rating: #FFD700;
	--danger: #dc3545;
	--danger-hover: #c82333;

	/* Surface helpers */
	--surface-hover: rgba(255, 255, 255, 0.06);
	--border-subtle: rgba(255, 255, 255, 0.12);
	--shadow-color: rgba(0, 0, 0, 0.25);

	/* Border-radius */
	--radius-sm: 8px;
	--radius-md: 16px;
	--radius-lg: 24px;

	/* Elevation */
	--shadow-sm: 0 4px 12px rgba(0,0,0,0.2), 0 2px 6px rgba(0,0,0,0.1);
	--shadow-md: 0 8px 24px rgba(0,0,0,0.3), 0 4px 12px rgba(0,0,0,0.15);
	--shadow-lg: 0 20px 60px rgba(0,0,0,0.5);

	/* Typography */
	--heading-font: Orbitron, system-ui, sans-serif;
	--main-font: "Outfit", "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.light-mode {
	--bg: #ffffff;
	--panel: rgba(0, 0, 0, 0.04);
	--card: #f8f9fa;
	--card-border: rgba(0, 209, 255, 0.2);
	--text: #1a1a2e;
	--muted: #4a5568;
	--accent: #00a8cc;
	--cta: #00a8cc;
	--cta-hover: #0090b0;
	--cta-text: #ffffff;
	--ring: rgba(0, 168, 204, 0.3);

	--bg-deep: #ffffff;
	--bg-mid: #ffffff;
	--header-bg: rgba(255, 255, 255, 0.95);
	--overlay: rgba(0, 0, 0, 0.5);

	--accent-soft: rgba(0, 168, 204, 0.08);
	--accent-muted: rgba(91, 122, 154, 0.15);
	--accent-glow: rgba(0, 168, 204, 0.3);

	--rating: #FFD700;
	--danger: #dc3545;
	--danger-hover: #c82333;

	--surface-hover: rgba(0, 0, 0, 0.04);
	--border-subtle: rgba(0, 0, 0, 0.08);
	--shadow-color: rgba(0, 0, 0, 0.1);

	--shadow-sm: 0 4px 12px rgba(0,0,0,0.06), 0 2px 6px rgba(0,0,0,0.03);
	--shadow-md: 0 8px 24px rgba(0,0,0,0.1), 0 4px 12px rgba(0,0,0,0.05);
	--shadow-lg: 0 20px 60px rgba(0,0,0,0.15);
}