/*
 * IntelligenceGain design tokens.
 *
 * Primary color: deep purple. Accents come from the course artwork
 * (blue / emerald / gold / burgundy on dark glassy surfaces).
 * To rebrand later, edit these values or add assets/css/brand.css (loaded last)
 * that redefines them on :root. main.css only uses these variables.
 */
:root {
	/* Palette */
	--ig-purple-950: #12051f;
	--ig-purple-900: #1f0a3a;
	--ig-purple-800: #2e1065;
	--ig-purple-700: #4c1d95;
	--ig-purple-600: #5b21b6;
	--ig-purple-500: #6d28d9;
	--ig-purple-300: #c4b5fd;
	--ig-purple-100: #ede9fe;
	--ig-purple-50: #f6f3ff;
	--ig-blue-500: #2f6fec;
	--ig-blue-400: #5b8ff5;
	--ig-emerald-600: #0b8a5f;
	--ig-emerald-400: #2fd39b;
	--ig-gold-400: #e2b84b;
	--ig-burgundy-600: #8c1d40;

	/* Roles */
	--ig-color-bg: #f7f6fb;
	--ig-color-surface: #ffffff;
	--ig-color-surface-muted: #f1eef8;
	--ig-color-text: #171226;
	--ig-color-text-muted: #5d5872;
	--ig-color-border: #e4e0ee;
	--ig-color-link: var(--ig-purple-600);
	--ig-color-focus: var(--ig-purple-500);

	--ig-color-primary: var(--ig-purple-600);          /* Buttons incl. "Get On Udemy" */
	--ig-color-primary-hover: var(--ig-purple-700);
	--ig-color-on-primary: #ffffff;
	--ig-color-primary-soft: var(--ig-purple-100);     /* Tints, badges */

	--ig-color-secondary: var(--ig-purple-800);        /* "View" outline button */
	--ig-color-on-dark: #ffffff;
	--ig-color-on-dark-muted: #cfc6e6;
	--ig-color-dark-accent: var(--ig-purple-300);      /* Icons/eyebrows on dark backgrounds */

	--ig-color-header-bg: var(--ig-purple-950);
	--ig-color-footer-bg: var(--ig-purple-950);

	--ig-color-accent-1: var(--ig-blue-500);
	--ig-color-accent-2: var(--ig-emerald-400);
	--ig-color-accent-3: var(--ig-gold-400);
	--ig-color-accent-4: var(--ig-burgundy-600);

	--ig-hero-bg:
		radial-gradient(55% 75% at 88% 15%, rgba(109, 40, 217, 0.55), transparent 60%),
		radial-gradient(40% 60% at 70% 95%, rgba(47, 111, 236, 0.22), transparent 60%),
		radial-gradient(30% 40% at 98% 70%, rgba(226, 184, 75, 0.14), transparent 60%),
		linear-gradient(135deg, var(--ig-purple-950), var(--ig-purple-800));
	--ig-placeholder-bg:
		radial-gradient(60% 80% at 80% 20%, rgba(196, 181, 253, 0.55), transparent 60%),
		linear-gradient(135deg, var(--ig-purple-100), #ddd3fb);

	/* Type */
	--ig-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--ig-font-heading: var(--ig-font-sans);
	--ig-text-sm: 0.875rem;
	--ig-text-base: 1rem;
	--ig-text-lg: 1.125rem;
	--ig-text-xl: 1.375rem;
	--ig-text-2xl: clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem);
	--ig-text-3xl: clamp(2rem, 1.3rem + 2.6vw, 3.25rem);
	--ig-text-4xl: clamp(2.4rem, 1.4rem + 3.6vw, 4.25rem);
	--ig-leading: 1.65;

	/* Shape & space */
	--ig-radius-sm: 8px;
	--ig-radius: 14px;
	--ig-radius-lg: 22px;
	--ig-radius-pill: 999px;
	--ig-shadow: 0 1px 2px rgba(31, 10, 58, 0.06), 0 8px 24px rgba(31, 10, 58, 0.08);
	--ig-shadow-lg: 0 2px 4px rgba(31, 10, 58, 0.08), 0 18px 40px rgba(31, 10, 58, 0.16);
	--ig-container: 1200px;
	--ig-gutter: clamp(16px, 4vw, 32px);
	--ig-space-section: clamp(56px, 8vw, 112px);
	--ig-space-hero: clamp(80px, 12vw, 160px);
}