/* ==========================================================================
   LMS Theme: Playful
   --------------------------------------------------------------------------
   Warm, energetic palette with bold radii, pronounced shadows, and a
   friendly feel suited for onboarding, soft-skills, and casual courses.
   Load AFTER lms-components.css to override the base design tokens.
   ========================================================================== */

.theme-playful {
	--lms-primary: #e5405e;
	--lms-primary-light: #fdeef1;
	--lms-secondary: #2d2740;
	--lms-accent: #f59e0b;
	--lms-accent-light: #fef6e0;
	--lms-bg: #fffdf9;
	--lms-bg-muted: #fef7ee;
	--lms-text: #2d2740;
	--lms-text-muted: #8a7f96;
	--lms-border: #f0e4d7;
	--lms-radius: 16px;
	--lms-radius-sm: 10px;
	--lms-radius-lg: 24px;
	--lms-shadow: 0 2px 6px rgba(229, 64, 94, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
	--lms-shadow-md: 0 6px 20px rgba(229, 64, 94, 0.10);
	--lms-shadow-lg: 0 12px 36px rgba(229, 64, 94, 0.13);
	--lms-font-base: 'Nunito', 'Segoe UI', system-ui, sans-serif;
	--lms-font-heading: 'Nunito', 'Segoe UI', system-ui, sans-serif;
}

/* Hero: coral-to-amber gradient */
.theme-playful .lms-hero {
	background: linear-gradient(135deg, #e5405e, #f59e0b);
}

/* Callout: coral accent with warm background */
.theme-playful .lms-callout {
	border-left-color: #e5405e;
	background: #fdeef1;
}

.theme-playful .lms-callout__label {
	color: #e5405e;
}

/* Icon grid: bouncy hover */
.theme-playful .lms-icon-grid__item {
	border-radius: var(--lms-radius);
}

.theme-playful .lms-icon-grid__item:hover {
	box-shadow: var(--lms-shadow-md);
	transform: translateY(-4px);
	border-color: rgba(245, 158, 11, 0.4);
}

/* Stat number in coral */
.theme-playful .lms-stat__number {
	color: #e5405e;
}

/* Stat background: warm peach-to-cream */
.theme-playful .lms-stat {
	background: linear-gradient(135deg, #fdeef1, #fef6e0);
}

/* Timeline markers in amber */
.theme-playful .lms-timeline__marker {
	background: #f59e0b;
	color: #2d2740;
}

/* Quote block: amber accent */
.theme-playful .lms-quote {
	border-left-color: #f59e0b;
	background: #fef6e0;
}

.theme-playful .lms-quote::before {
	color: #f59e0b;
}

/* Checklist icons in coral */
.theme-playful .lms-checklist__icon {
	color: #e5405e;
}

/* Two-column: slightly warmer background */
.theme-playful .lms-two-col {
	background: #fef7ee;
}