:root {
  --ink: #0b0e10;
  --blue: #24a63d;
  --blue-dark: #177d2b;
  --accent: #24a63d;
  --success: #24a63d;
  --sky: #edf5e9;
  --paper: #fffefa;
  --surface: #fffefa;
  --surface-soft: #f3f4e9;
  --page: #fbf8ef;
  --mist: #f3f4e9;
  --muted: #5d625f;
  --line: #e3e1d5;
  --shadow: 0 18px 50px rgba(11, 32, 18, .09);
}

html, body, button, input, select, textarea {
  font-family: var(--font-body, 'DM Sans', Arial, sans-serif);
}

h1, h2, h3, h4, h5, h6, .brand, .btn, .eyebrow {
  font-family: var(--font-display, Manrope, Arial, sans-serif);
}

body { background: var(--page); color: var(--ink); }
.btn-primary { background: var(--blue); border-color: var(--blue); }
.btn-primary:hover, .btn-primary:focus-visible { background: var(--blue-dark); border-color: var(--blue-dark); }
.sales-buy-card { background: linear-gradient(145deg, #13251a, #177d2b); }
.brand img { width: auto; max-width: 172px; max-height: 52px; }
.admin-side { background: #0d1215; }
.course-cover-preview { width: min(420px, 100%); aspect-ratio: 16 / 9; object-fit: cover; border-radius: 14px; border: 1px solid var(--line); }
.course-commercial-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.course-commercial-grid .field-wide { grid-column: 1 / -1; }
@media (max-width: 720px) { .course-commercial-grid { grid-template-columns: 1fr; } }
.sales-course-cover { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 14px; }
.course-card-price { display: block; margin-top: auto; color: var(--ink); font-family: var(--font-display); font-size: 1.05rem; }

/* Loaded last: both themes share the Institut Libre identity. */
html[data-theme="light"], html:not([data-theme]) {
  --blue: #177d2b;
  --blue-dark: #116522;
  --accent: #177d2b;
}
html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #f1f7f2;
  --blue: #80df94;
  --blue-dark: #a1ecb1;
  --accent: #80df94;
  --success: #80df94;
  --page: #0c1410;
  --paper: #15211a;
  --surface: #15211a;
  --surface-soft: #1e3024;
  --mist: #1e3024;
  --sky: #243d2b;
  --line: #3b5141;
  --muted: #bacbbe;
  --v2753-surface: #15211a;
  --v2753-surface-soft: #1e3024;
  --v2753-border: #3b5141;
  --v2753-text: #f1f7f2;
  --v2753-muted: #bacbbe;
}
html body { background: var(--page); color: var(--ink); }
html .btn-primary {
  background: #177d2b; border-color: #177d2b; color: #fff;
  box-shadow: 0 8px 22px rgba(13, 72, 27, .16);
}
html .btn-primary:hover, html .btn-primary:focus-visible { background: #116522; border-color: #116522; }
html[data-theme="dark"] .btn-primary { background: #80df94; color: #0b2712; border-color: #80df94; }
html[data-theme="dark"] .btn-primary:hover { background: #a1ecb1; border-color: #a1ecb1; }
html[data-theme="dark"] :is(.card, .course-editor, .login-form-wrap, .admin-main) { background: var(--paper); color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] .admin-main { background: var(--page); }
html[data-theme="dark"] :is(input, textarea, select) { background: #0e1912; color: #f1f7f2; border-color: var(--line); caret-color: #f1f7f2; }
html[data-theme="dark"] :is(input, textarea)::placeholder { color: #a3b8a8; }
html[data-theme="dark"] :is(label, .field > span, .panel-head h2, .admin-main h1, .admin-stat strong, .login-form h2) { color: var(--ink); }
html[data-theme="dark"] :is(.muted, .admin-stat span, .field small, .publish-toggle small) { color: var(--muted); }
html[data-theme="dark"] :is(.publish-toggle, .invitation-explainer, .btn-secondary, .theme-toggle) { background: var(--surface-soft); color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] :is(.tag, .status, .module-index) { background: #244a2f; color: #b6efc3; }
html[data-theme="dark"] :is(.eyebrow, .auth-row a) { color: #80df94; }
html :is(input, textarea, select):focus { border-color: var(--blue); outline-color: var(--blue); box-shadow: 0 0 0 3px rgba(36,166,61,.18); }
html input[type="checkbox"] { accent-color: #177d2b; }
html .admin-side { background: #0d1711; }
html[data-theme="dark"] .admin-side { background: #0d1711; }
html[data-theme="dark"] :is(.login-form, .admin-form, .course-editor) :is(input, textarea, select) { background: #0e1912; color: #f1f7f2; border-color: #3b5141; }
html .admin-side .admin-menu a { color: #c3d4c8; }
html .admin-side .admin-menu a.active, html .admin-side .admin-menu a:hover { background: #243d2b; color: #fff; }
html .login-story { background: radial-gradient(ellipse at top right, #258a3b, transparent 65%), #103a1d; color: #fff; }
html .login-story :is(h1, p) { color: #fff; }
html .login-story .eyebrow { color: #b5efc2; }
html .login-story h1 { font-size: clamp(2rem, 4.1vw, 4.25rem); line-height: 1.08; max-width: 12ch; }
html .login-story > img { filter: brightness(0) invert(1); }
html .login-form h2 { font-size: clamp(1.8rem, 3vw, 3rem); }
@media(max-width: 720px) {
  html .login-story h1 { max-width: 17ch; font-size: clamp(1.8rem, 7vw, 2.8rem); }
  html .admin-main { min-width: 0; }
  html .admin-header { flex-wrap: wrap; gap: 18px; }
}

html[data-theme="dark"] .login-form :is(input,textarea,select) { background:#0e1912 !important;color:#f1f7f2 !important;border-color:#3b5141 !important; }