/**
 * SLI-LMS Design System — Frontend Stylesheet
 *
 * Applies design tokens from the Design System customizer to all
 * frontend components. Works alongside the dynamic inline CSS that
 * sets the CSS custom properties via <style id="sli-design-tokens">.
 */

/* ===== Global Resets (scoped) ===== */
.sli-form *, .sli-catalog-wrap *, .sli-course-overview *,
.sli-player-wrap *, .sli-account-wrap *, .sli-notes-container * {
	box-sizing: border-box;
}

/* ===== Typography ===== */
.sli-form, .sli-catalog-wrap, .sli-course-overview,
.sli-player-wrap, .sli-account-wrap, .sli-notes-container {
	font-family: var(--sli-font-body);
	font-size: var(--sli-text-base);
	color: var(--sli-text);
	line-height: 1.6;
}

/* Headings */
.sli-form h1, .sli-catalog-wrap h1, .sli-course-overview h1,
.sli-player-wrap h1, .sli-account-wrap h1,
.sli-form h2, .sli-catalog-wrap h2, .sli-course-overview h2,
.sli-player-wrap h2, .sli-account-wrap h2 {
	font-family: var(--sli-font-heading);
	color: var(--sli-heading-color);
	line-height: var(--sli-heading-lh);
}
.sli-form h1, .sli-catalog-header h1 { font-size: var(--sli-h1-size); font-weight: var(--sli-h1-weight); letter-spacing: var(--sli-h1-spacing); }
.sli-form h2, .sli-catalog-wrap h2 { font-size: var(--sli-h2-size); font-weight: var(--sli-h2-weight); letter-spacing: var(--sli-h2-spacing); }
h3.sli-course-card-title, .sli-course-hero h1, .sli-player-title { font-family: var(--sli-font-heading); color: var(--sli-heading-color); }

/* Links */
.sli-form a, .sli-catalog-wrap a, .sli-course-overview a,
.sli-account-wrap a, .sli-notes-container a {
	color: var(--sli-link);
	text-decoration: none;
	transition: color var(--sli-anim);
}
.sli-form a:hover, .sli-catalog-wrap a:hover, .sli-course-overview a:hover,
.sli-account-wrap a:hover, .sli-notes-container a:hover {
	color: var(--sli-link-hover);
}

/* ===== Buttons ===== */
.sli-button, .sli-btn, button.sli-button-primary,
.sli-course-card-body .sli-enroll-btn,
.sli-player-wrap .sli-mark-complete-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: var(--sli-btn-py) var(--sli-btn-px);
	font-family: var(--sli-font-body);
	font-size: var(--sli-btn-fs);
	font-weight: var(--sli-btn-fw);
	line-height: 1.4;
	border-radius: var(--sli-btn-radius);
	border: none;
	cursor: pointer;
	transition: all var(--sli-btn-transition);
	text-decoration: none;
}

/* Primary */
.sli-button-primary, .sli-btn-primary,
.sli-enroll-btn, .sli-mark-complete-btn {
	background: var(--sli-gradient-primary);
	color: var(--sli-text-on-primary);
	box-shadow: var(--sli-btn-shadow);
}
.sli-button-primary:hover, .sli-btn-primary:hover,
.sli-enroll-btn:hover, .sli-mark-complete-btn:hover {
	transform: translateY(-1px);
	box-shadow: var(--sli-shadow-lg);
	opacity: .92;
}

/* Secondary */
.sli-button-secondary, .sli-btn-secondary {
	background: var(--sli-secondary);
	color: #fff;
	box-shadow: var(--sli-btn-shadow);
}
.sli-button-secondary:hover, .sli-btn-secondary:hover {
	background: var(--sli-secondary-dark);
}

/* Outline */
.sli-button-outline, .sli-btn-outline {
	background: transparent;
	color: var(--sli-primary);
	border: 1.5px solid var(--sli-primary);
}
.sli-button-outline:hover, .sli-btn-outline:hover {
	background: var(--sli-primary-light);
}

/* Success / Danger */
.sli-button-success, .sli-btn-success { background: var(--sli-success); color: #fff; }
.sli-button-danger, .sli-btn-danger { background: var(--sli-danger); color: #fff; }

/* ===== Forms ===== */
.sli-form-card, .sli-login-card {
	background: var(--sli-bg-card);
	border: var(--sli-card-border-w) solid var(--sli-border);
	border-radius: var(--sli-card-radius);
	box-shadow: var(--sli-shadow);
	padding: var(--sli-card-pad);
}
.sli-form-header h2 {
	font-family: var(--sli-font-heading);
	font-size: var(--sli-h2-size);
	font-weight: var(--sli-h2-weight);
	color: var(--sli-heading-color);
}
.sli-form-header p { color: var(--sli-text-secondary); font-size: var(--sli-text-sm); }

.sli-form-group label {
	font-size: var(--sli-text-xs);
	font-weight: 600;
	color: var(--sli-text);
	text-transform: uppercase;
	letter-spacing: .04em;
}
.sli-form-group input,
.sli-form-group select,
.sli-form-group textarea {
	width: 100%;
	padding: var(--sli-input-py) var(--sli-input-px);
	border: var(--sli-input-border-w) solid var(--sli-border);
	border-radius: var(--sli-input-radius);
	font-family: var(--sli-font-body);
	font-size: var(--sli-input-fs);
	color: var(--sli-text);
	background: var(--sli-bg-card);
	transition: border-color var(--sli-anim), box-shadow var(--sli-anim);
}
.sli-form-group input:focus,
.sli-form-group select:focus,
.sli-form-group textarea:focus {
	border-color: var(--sli-primary);
	box-shadow: 0 0 0 var(--sli-input-ring) rgba(79, 70, 229, var(--sli-input-ring-alpha));
	outline: none;
}
.sli-form-group input::placeholder { color: var(--sli-text-muted); }

/* ===== Cards ===== */
.sli-course-card, .sli-account-card, .sli-cert-card {
	background: var(--sli-bg-card);
	border: var(--sli-card-border-w) solid var(--sli-border);
	border-radius: var(--sli-card-radius);
	box-shadow: var(--sli-card-shadow);
	overflow: hidden;
	transition: transform var(--sli-anim), box-shadow var(--sli-anim);
}
.sli-course-card:hover, .sli-account-card:hover {
	box-shadow: var(--sli-card-hover-shadow);
	transform: translateY(-4px);
}
.sli-course-card-body { padding: var(--sli-card-pad); }
.sli-course-card-title { font-family: var(--sli-font-heading); }
.sli-course-card-title a { color: var(--sli-heading-color); }
.sli-course-card-title a:hover { color: var(--sli-primary); }
.sli-course-card-excerpt { color: var(--sli-text-secondary); font-size: var(--sli-text-sm); }

/* Card thumbnail placeholder */
.sli-course-card-thumb-placeholder {
	background: var(--sli-gradient-card-accent);
}

/* ===== Course Catalog ===== */
.sli-catalog-wrap { font-family: var(--sli-font-body); }
.sli-catalog-header h1 {
	font-family: var(--sli-font-heading);
	color: var(--sli-heading-color);
}
.sli-catalog-subtitle { color: var(--sli-text-secondary); }

/* Search & Filter Bar */
.sli-catalog-filters input,
.sli-catalog-filters select {
	padding: var(--sli-input-py) var(--sli-input-px);
	border: var(--sli-input-border-w) solid var(--sli-border);
	border-radius: var(--sli-input-radius);
	font-size: var(--sli-input-fs);
	font-family: var(--sli-font-body);
	transition: border-color var(--sli-anim), box-shadow var(--sli-anim);
}
.sli-catalog-filters input:focus,
.sli-catalog-filters select:focus {
	border-color: var(--sli-primary);
	box-shadow: 0 0 0 var(--sli-input-ring) rgba(79,70,229,var(--sli-input-ring-alpha));
	outline: none;
}
.sli-catalog-filters .sli-filter-btn {
	background: var(--sli-primary);
	color: var(--sli-text-on-primary);
	border-radius: var(--sli-btn-radius);
	font-weight: var(--sli-btn-fw);
}

/* Difficulty badges */
.sli-difficulty-beginner { color: var(--sli-success); }
.sli-difficulty-intermediate { color: var(--sli-warning); }
.sli-difficulty-advanced { color: var(--sli-danger); }

/* ===== Progress Bars ===== */
.sli-progress, .sli-course-progress-bar,
.sli-player-progress-bar, .sli-lesson-progress {
	height: var(--sli-progress-h);
	background: var(--sli-progress-bg);
	border-radius: var(--sli-progress-r);
	overflow: hidden;
}
.sli-progress-fill, .sli-course-progress-fill,
.sli-player-progress-fill, .sli-lesson-progress-fill {
	height: 100%;
	border-radius: inherit;
	background: var(--sli-gradient-primary);
	transition: width .4s ease;
}

/* ===== Course Player ===== */
.sli-player-wrap { font-family: var(--sli-font-body); }
.sli-player-sidebar {
	width: var(--sli-player-sidebar);
	background: var(--sli-player-sidebar-bg);
	border-right: 1px solid var(--sli-border);
}
.sli-player-lesson-item {
	border-bottom: 1px solid var(--sli-border-light);
	transition: background var(--sli-anim);
}
.sli-player-lesson-item:hover { background: var(--sli-bg-card-hover); }
.sli-player-lesson-item.active { background: var(--sli-primary-light); border-left: 3px solid var(--sli-primary); }
.sli-player-lesson-title { font-family: var(--sli-font-heading); font-weight: 600; }

/* ===== Account / Profile ===== */
.sli-account-wrap { font-family: var(--sli-font-body); }
.sli-account-header {
	background: var(--sli-gradient-hero);
	color: var(--sli-text-on-primary);
	border-radius: var(--sli-radius-lg);
	padding: 40px;
}
.sli-account-header h1 {
	font-family: var(--sli-font-heading);
	font-size: var(--sli-h1-size);
	font-weight: var(--sli-h1-weight);
}

/* Status badges */
.sli-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: var(--sli-radius-full); font-size: var(--sli-text-xs); font-weight: 600; }
.sli-badge-active, .sli-badge-completed { background: var(--sli-success-bg); color: var(--sli-success); }
.sli-badge-pending { background: var(--sli-warning-bg); color: var(--sli-warning); }
.sli-badge-expired, .sli-badge-cancelled { background: var(--sli-danger-bg); color: var(--sli-danger); }
.sli-badge-info { background: var(--sli-info-bg); color: var(--sli-info); }

/* ===== Notes ===== */
.sli-notes-container { font-family: var(--sli-font-body); }
.sli-note-card {
	background: var(--sli-bg-card);
	border: var(--sli-card-border-w) solid var(--sli-border);
	border-radius: var(--sli-radius);
	padding: 20px;
	margin-bottom: 16px;
	transition: box-shadow var(--sli-anim);
}
.sli-note-card:hover { box-shadow: var(--sli-shadow); }

/* ===== Certificates ===== */
.sli-cert-card {
	text-align: center;
	padding: var(--sli-card-pad);
}
.sli-cert-card h3 { font-family: var(--sli-font-heading); color: var(--sli-heading-color); }

/* ===== Quiz ===== */
.sli-quiz-wrap {
	background: var(--sli-bg-card);
	border: var(--sli-card-border-w) solid var(--sli-border);
	border-radius: var(--sli-card-radius);
	padding: var(--sli-card-pad);
	box-shadow: var(--sli-shadow);
}
.sli-quiz-question { font-family: var(--sli-font-heading); font-size: var(--sli-h4-size); font-weight: var(--sli-h4-weight); }
.sli-quiz-option {
	padding: 14px 18px;
	border: var(--sli-input-border-w) solid var(--sli-border);
	border-radius: var(--sli-radius);
	cursor: pointer;
	transition: all var(--sli-anim);
}
.sli-quiz-option:hover { border-color: var(--sli-primary); background: var(--sli-primary-light); }
.sli-quiz-option.selected { border-color: var(--sli-primary); background: var(--sli-primary-light); box-shadow: 0 0 0 2px var(--sli-primary); }
.sli-quiz-option.correct { border-color: var(--sli-success); background: var(--sli-success-bg); }
.sli-quiz-option.incorrect { border-color: var(--sli-danger); background: var(--sli-danger-bg); }

/* ===== Alerts / Notices ===== */
.sli-notice, .sli-alert {
	padding: 14px 20px;
	border-radius: var(--sli-radius);
	font-size: var(--sli-text-sm);
	border-left: 4px solid;
}
.sli-notice-success, .sli-alert-success { background: var(--sli-success-bg); border-color: var(--sli-success); color: var(--sli-success); }
.sli-notice-warning, .sli-alert-warning { background: var(--sli-warning-bg); border-color: var(--sli-warning); color: var(--sli-warning); }
.sli-notice-error, .sli-alert-error { background: var(--sli-danger-bg); border-color: var(--sli-danger); color: var(--sli-danger); }
.sli-notice-info, .sli-alert-info { background: var(--sli-info-bg); border-color: var(--sli-info); color: var(--sli-info); }

/* ===== Tables (account, reports) ===== */
.sli-table { width: 100%; border-collapse: collapse; font-family: var(--sli-font-body); }
.sli-table th {
	font-size: var(--sli-text-xs); font-weight: 700; text-transform: uppercase;
	letter-spacing: .05em; color: var(--sli-text-secondary); padding: 12px 16px;
	border-bottom: 2px solid var(--sli-border); text-align: left;
}
.sli-table td { padding: 14px 16px; border-bottom: 1px solid var(--sli-border-light); color: var(--sli-text); }
.sli-table tr:hover td { background: var(--sli-bg-card-hover); }

/* ===== Pagination ===== */
.sli-pagination { display: flex; gap: 6px; justify-content: center; margin-top: 32px; }
.sli-pagination a, .sli-pagination span {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 38px; height: 38px; padding: 0 12px;
	border-radius: var(--sli-radius); font-size: var(--sli-text-sm); font-weight: 600;
	border: 1px solid var(--sli-border); color: var(--sli-text-secondary);
	text-decoration: none; transition: all var(--sli-anim);
}
.sli-pagination a:hover { border-color: var(--sli-primary); color: var(--sli-primary); background: var(--sli-primary-light); }
.sli-pagination .current { background: var(--sli-primary); color: var(--sli-text-on-primary); border-color: var(--sli-primary); }

/* ===== Animations ===== */
@keyframes sliFadeInUp {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: translateY(0); }
}
.sli-animate-in { animation: sliFadeInUp var(--sli-anim) ease forwards; }

/* ===== Password Strength ===== */
.sli-password-strength-bar {
	height: var(--sli-progress-h);
	background: var(--sli-progress-bg);
	border-radius: var(--sli-progress-r);
	overflow: hidden;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
	:root {
		--sli-h1-size: 28px;
		--sli-h2-size: 24px;
		--sli-h3-size: 20px;
	}
	.sli-course-grid.sli-cols-3 { grid-template-columns: 1fr; }
	.sli-course-hero { flex-direction: column; }
	.sli-course-hero-image { flex: none; width: 100%; }
	.sli-player-sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--sli-border); }
}