/**
 * LMS Lab — Minimal baseline design tokens
 *
 * Neutral layout only. No decorative theme layer.
 *
 * @package LMS_Lab
 */

:root {
	/* AVM brand design system (mirrors the main-page reference design) */
	--lms-color-bg: #f4f5f7;
	--lms-color-surface: #ffffff;
	--lms-color-surface-soft: #f4f5f7;
	--lms-color-text: #14161c;
	--lms-color-text-secondary: #4a5059;
	--lms-color-muted: #767c87;
	--lms-color-border: #e7e9ee;
	--lms-color-border-soft: #edeef2;

	--lms-color-accent: #e30613;
	--lms-color-accent-hover: #c8050f;
	--lms-color-accent-strong: #a50410;
	--lms-color-accent-soft: #fce9ea;
	--lms-color-accent-soft-2: #fbefef;

	--lms-color-ink: #15171e;
	--lms-color-ink-text: #afb4be;

	--lms-color-success: #12b76a;
	--lms-color-warning: #b54708;
	--lms-color-warning-soft: #fff4e8;

	--lms-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--lms-font-head: "Manrope", "Inter", system-ui, sans-serif;
	--lms-font-size-sm: 0.875rem;
	--lms-font-size-base: 1rem;
	--lms-font-size-lg: 1.125rem;
	--lms-font-size-xl: 1.25rem;
	--lms-font-size-2xl: 1.5rem;
	--lms-font-size-hero: clamp(2rem, 4.5vw, 3.25rem);

	--lms-space-2: 0.5rem;
	--lms-space-3: 0.75rem;
	--lms-space-4: 1rem;
	--lms-space-5: 1.25rem;
	--lms-space-6: 1.5rem;
	--lms-space-8: 2rem;
	--lms-space-10: 2.5rem;
	--lms-space-12: 3rem;

	--lms-radius-sm: 10px;
	--lms-radius-md: 12px;
	--lms-radius-lg: 16px;
	--lms-radius-card: 22px;
	--lms-radius-pill: 999px;

	--lms-container-max: 75rem;
	--lms-container-padding: 1.25rem;
	--lms-content-max: 42rem;
	--lms-sidebar-width: 20rem;
	--lms-layout-gap: 1.5rem;

	--lms-shadow-sm: 0 2px 8px rgba(20, 22, 28, 0.05);
	--lms-shadow: 0 14px 40px -18px rgba(20, 22, 28, 0.18);
	--lms-shadow-lg: 0 30px 70px -30px rgba(20, 22, 28, 0.3);
	--lms-shadow-red: 0 16px 34px -14px rgba(227, 6, 19, 0.5);
	--lms-shadow-focus: 0 0 0 4px rgba(227, 6, 19, 0.18);
	--lms-duration-fast: 150ms;
	--lms-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

.lms-quiz-page,
.lms-single-lesson-page,
.lms-single-course-page,
.lms-courses-page,
.lms-account-page {
	font-family: var(--lms-font-sans);
	font-size: var(--lms-font-size-base);
	line-height: 1.55;
	color: var(--lms-color-text);
	background: var(--lms-color-bg);
	-webkit-font-smoothing: antialiased;
}

.lms-quiz-page h1,
.lms-quiz-page h2,
.lms-quiz-page h3,
.lms-quiz-page h4,
.lms-single-lesson-page h1,
.lms-single-lesson-page h2,
.lms-single-lesson-page h3,
.lms-single-lesson-page h4,
.lms-single-course-page h1,
.lms-single-course-page h2,
.lms-single-course-page h3,
.lms-single-course-page h4,
.lms-courses-page h1,
.lms-courses-page h2,
.lms-courses-page h3,
.lms-courses-page h4,
.lms-account-page h1,
.lms-account-page h2,
.lms-account-page h3,
.lms-account-page h4 {
	font-family: var(--lms-font-head);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--lms-color-ink);
}

.lms-container {
	width: min(100% - var(--lms-container-padding) * 2, var(--lms-container-max));
	margin-inline: auto;
}

.lms-card {
	background: var(--lms-color-surface);
	border: 1px solid var(--lms-color-border);
	border-radius: var(--lms-radius-card);
	box-shadow: var(--lms-shadow-sm);
}

.lms-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	padding: 0.75rem 1.4rem;
	border: 1.5px solid transparent;
	border-radius: var(--lms-radius-md);
	font-family: var(--lms-font-head);
	font-size: var(--lms-font-size-base);
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition:
		transform var(--lms-duration-fast) var(--lms-ease),
		box-shadow 0.25s var(--lms-ease),
		background 0.2s,
		color 0.2s,
		border-color 0.2s;
}

.lms-btn--primary {
	color: #fff;
	background: var(--lms-color-accent);
	border-color: var(--lms-color-accent);
	box-shadow: var(--lms-shadow-red);
}

.lms-btn--primary:hover {
	background: var(--lms-color-accent-hover);
	border-color: var(--lms-color-accent-hover);
	color: #fff;
	transform: translateY(-2px);
}

.lms-btn--secondary {
	color: var(--lms-color-accent);
	background: transparent;
	border-color: var(--lms-color-accent);
}

.lms-btn--secondary:hover {
	color: #fff;
	background: var(--lms-color-accent);
	transform: translateY(-2px);
}

.lms-btn--wide {
	width: 100%;
}

.lms-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.35rem 0.75rem;
	border-radius: var(--lms-radius-pill);
	font-family: var(--lms-font-head);
	font-size: 0.8125rem;
	font-weight: 700;
	border: 1px solid transparent;
	background: var(--lms-color-accent);
	color: #fff;
	box-shadow: var(--lms-shadow-red);
}

.lms-chip {
	display: inline-flex;
	align-items: center;
	padding: 0.4rem 0.8rem;
	border: 1px solid var(--lms-color-border);
	border-radius: var(--lms-radius-pill);
	font-size: var(--lms-font-size-sm);
	font-weight: 600;
	color: var(--lms-color-text);
	background: var(--lms-color-surface);
}

.lms-text-lead {
	font-size: var(--lms-font-size-lg);
	line-height: 1.55;
	color: var(--lms-color-text-secondary);
}

.lms-single-course-page .llms-button-primary,
.lms-single-lesson-page .llms-button-primary,
.lms-quiz-page .llms-button-primary,
.lms-single-lesson-page input[type="submit"].llms-button-primary,
.lms-quiz-page input[type="submit"].llms-button-primary,
.lms-quiz-page .llms-quiz-ui .llms-quiz-nav button {
	border-radius: var(--lms-radius-md);
	font-family: var(--lms-font-head);
	font-weight: 700;
	color: #fff;
	background: var(--lms-color-accent);
	border-color: var(--lms-color-accent);
	box-shadow: var(--lms-shadow-red);
}

.lms-single-course-page .llms-progress .progress-bar-complete,
.lms-single-lesson-page .llms-progress .progress-bar-complete,
.lms-quiz-page .llms-progress .progress-bar-complete {
	background: var(--lms-color-accent);
}