.learn-ui {
font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--learn-bg: #f1f5f9;
--learn-text: #334155;
--learn-h1: #0f172a;
--learn-surface: #ffffff;
--learn-surface-2: #f6f9fb;
--learn-border: #e2e8f0;
--learn-link: #4f46e5;
--learn-link-hover: #4338ca;
--learn-muted: #838d9a;
--learn-accent: #0f172a;
--learn-accent-hover: #191480;
--learn-accent-text: #ffffff;
--learn-accent-rgb: 15,23,42;
--learn-input-bg: #ffffff;
--learn-form-text: #334155;
--learn-form-border: #cbd5e1;
--learn-form-focus: #818cf8;
--learn-header-bg: #0f172a;
--learn-header-text: #e2e8f0;
--learn-header-text-hover: #ffffff;
--learn-header-border: #f8fafc;
--learn-btn-secondary-bg: #64748b;
--learn-btn-secondary-text: #ffffff;
--learn-btn-secondary-hover: #475569;
--learn-btn-danger-bg: #ef4444;
--learn-btn-danger-hover: #dc2626;
--learn-btn-danger-text: #ffffff;
--primary-gradient: linear-gradient(135deg, #0f172a 0%, #0b111e 100%);
--learn-primary-gradient-hover: linear-gradient(135deg, #191480 0%, #15116d 100%);
}
.learn-ui h1,
.learn-ui .h1,
.learn-ui .category-title {
color: var(--learn-h1, var(--learn-text));
}
.learn-ui .form-control:focus,
.learn-ui .form-select:focus,
.learn-ui input:focus,
.learn-ui textarea:focus {
border-color: var(--learn-form-focus);
box-shadow: 0 0 0 0.2rem rgba(15,23,42, 0.2);
}