/* ==========================================================================
   LMS Theme: Modern
   --------------------------------------------------------------------------
   Sleek dark-mode inspired palette with sharp accents and generous depth.
   Load AFTER lms-components.css to override the base design tokens.
   ========================================================================== */

.theme-modern {
	--lms-primary: #6366f1;
	--lms-primary-light: #eef0ff;
	--lms-secondary: #1e1b4b;
	--lms-accent: #06b6d4;
	--lms-accent-light: #e0fafe;
	--lms-bg: #ffffff;
	--lms-bg-muted: #f5f3ff;
	--lms-text: #1e1b4b;
	--lms-text-muted: #7c7a9c;
	--lms-border: #e0dff5;
	--lms-radius: 12px;
	--lms-radius-sm: 8px;
	--lms-radius-lg: 20px;
	--lms-shadow: 0 1px 4px rgba(99, 102, 241, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
	--lms-shadow-md: 0 6px 18px rgba(99, 102, 241, 0.10);
	--lms-shadow-lg: 0 14px 40px rgba(99, 102, 241, 0.12);
	--lms-font-base: 'Inter', 'Segoe UI', system-ui, sans-serif;
	--lms-font-heading: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

/* Hero gradient uses the indigo-to-cyan spectrum */
.theme-modern .lms-hero {
	background: linear-gradient(135deg, #6366f1, #06b6d4);
}

/* Subtle purple border accent on callouts */
.theme-modern .lms-callout {
	border-left-color: #6366f1;
}

/* Icon grid cards get a faint purple border on hover */
.theme-modern .lms-icon-grid__item:hover {
	border-color: rgba(99, 102, 241, 0.3);
}

/* Stat number in vivid indigo */
.theme-modern .lms-stat__number {
	color: #6366f1;
}

/* Stat background gradient */
.theme-modern .lms-stat {
	background: linear-gradient(135deg, #eef0ff, #e0fafe);
}

/* Timeline markers match primary */
.theme-modern .lms-timeline__marker {
	background: #6366f1;
}

/* Quote accent bar in cyan */
.theme-modern .lms-quote {
	border-left-color: #06b6d4;
}

.theme-modern .lms-quote::before {
	color: #06b6d4;
}