/*
  Lesson Studio accessible colour contract.
  Every semantic background below has a matching foreground token.
  Components should use these pairs instead of inventing independent text colours.
*/

:root {
  --ls-page-bg: #F8FAFC;
  --ls-page-fg: #0F172A;
  --ls-surface-bg: #FFFFFF;
  --ls-surface-fg: #0F172A;
  --ls-muted-fg: #334155;
  --ls-subtle-fg: #475569;
  --ls-input-bg: #FFFFFF;
  --ls-input-fg: #0F172A;
  --ls-action-bg: #0F766E;
  --ls-action-fg: #FFFFFF;
  --ls-action-hover-bg: #0D504A;
  --ls-secondary-bg: #F8FAFC;
  --ls-secondary-fg: #0F172A;
  --ls-dark-bg: #0D1117;
  --ls-dark-panel-bg: #141B24;
  --ls-dark-fg: #FFFFFF;
  --ls-dark-muted-fg: #E2E8F0;
  --ls-gold-bg: #F8D24B;
  --ls-gold-fg: #1A1200;
  --ls-gold-on-dark: #F8D24B;
  --ls-info-bg: #1D4ED8;
  --ls-info-fg: #FFFFFF;
  --ls-info-pale-bg: #DBEAFE;
  --ls-info-pale-fg: #0F172A;
  --ls-success-bg: #15803D;
  --ls-success-fg: #FFFFFF;
  --ls-success-pale-bg: #DCFCE7;
  --ls-success-pale-fg: #0F172A;
  --ls-warning-pale-bg: #FEF3C7;
  --ls-warning-pale-fg: #0F172A;
  --ls-danger-bg: #DC2626;
  --ls-danger-fg: #FFFFFF;
  --ls-danger-pale-bg: #FEE2E2;
  --ls-danger-pale-fg: #7F1D1D;
  --ls-teal-pale-bg: #CCFBF1;
  --ls-teal-pale-fg: #0F172A;
  --ls-selected-bg: #FDE68A;
  --ls-selected-fg: #0F172A;
  --ls-disabled-bg: #E5E7EB;
  --ls-disabled-fg: #334155;

  --primary-text: var(--ls-page-fg) !important;
  --secondary-text: var(--ls-muted-fg) !important;
  --muted-text: var(--ls-subtle-fg) !important;
  --disabled-text: var(--ls-disabled-fg) !important;
  --page-bg: var(--ls-page-bg) !important;
  --surface: var(--ls-surface-bg) !important;
  --white: var(--ls-surface-bg) !important;
  --dark-navy: var(--ls-dark-bg) !important;
  --charcoal: var(--ls-dark-panel-bg) !important;
  --accessible-gold: var(--ls-gold-bg) !important;
  --dark-gold: #7C4A00 !important;
  --teal-action: var(--ls-action-bg) !important;
  --blue-info: var(--ls-info-bg) !important;
  --success-green: var(--ls-success-bg) !important;
  --error-red: var(--ls-danger-bg) !important;
  --ink: var(--ls-page-fg) !important;
  --body: var(--ls-muted-fg) !important;
  --muted: var(--ls-subtle-fg) !important;
  --ph: var(--ls-subtle-fg) !important;
  --on-dark: var(--ls-dark-fg) !important;
  --header-text: var(--ls-dark-fg) !important;
}

html,
body {
  background: var(--ls-page-bg) !important;
  color: var(--ls-page-fg) !important;
  text-shadow: none !important;
}

body * {
  text-shadow: none !important;
}

::placeholder {
  color: var(--ls-subtle-fg) !important;
  opacity: 1 !important;
}

.ui-on-light,
.ui-on-light * {
  color: var(--ls-surface-fg) !important;
}

.ui-on-dark,
.ui-on-dark *,
.ui-on-accent,
.ui-on-accent *,
.ui-action,
.ui-action *,
.ui-state-active,
.ui-state-active *,
.ui-toast,
.ui-toast * {
  color: var(--ls-action-fg) !important;
}

.ui-action,
.ui-state-active {
  background: var(--ls-action-bg) !important;
  border-color: var(--ls-action-bg) !important;
}

.ui-action:hover {
  background: var(--ls-action-hover-bg) !important;
}

.login-left,
.sidebar,
.student-header,
.sd-header,
.vb-sidebar,
#screenLoading,
.auth-header,
.legal-page-header,
.cookie-notice,
.fc-modal-head,
.fc-card,
.lesson-success-panel,
.generating-overlay,
.gen-card,
#generatingOverlay,
#lessonSuccessPanel {
  background-color: var(--ls-dark-bg);
  color: var(--ls-dark-fg) !important;
}

.login-left *,
.sidebar *,
.student-header *,
.sd-header *,
.vb-sidebar *,
#screenLoading *,
.auth-header *,
.legal-page-header *,
.cookie-notice *,
.fc-modal-head *,
.fc-card *,
.lesson-success-panel *,
.generating-overlay *,
.gen-card *,
#generatingOverlay *,
#lessonSuccessPanel * {
  color: inherit;
}

.nav-item,
.teacher-pill,
.vb-nav-item,
.sh-student,
.sh-signout {
  color: var(--ls-dark-fg) !important;
}

.nav-item.active,
.nav-item.active *,
.vb-nav-item.active,
.vb-nav-item.active *,
.login-brand-name,
.sb-name,
.vb-sb-name {
  color: var(--ls-gold-on-dark) !important;
}

.modal,
.modal-body,
.settings-card,
.dash-card,
.lesson-row,
.student-card,
.flow-card,
.source-material-card,
.source-panel,
.lib-card,
.video-lib-row,
.vb-bank-row,
.vb-req-row,
.share-link-modal {
  background-color: var(--ls-surface-bg) !important;
  color: var(--ls-surface-fg) !important;
}

.dash-card-title,
.lesson-row-title,
.student-name,
.flow-card-title,
.create-form-title,
.field-label,
.modal-label,
.settings-label,
.form-label,
.vb-ai-preview-title {
  color: var(--ls-surface-fg) !important;
}

.dash-card-sub,
.lesson-row-meta,
.student-goal,
.flow-card-sub,
.create-form-sub,
.recent-empty,
.section-title,
.modal-body p,
.settings-card .account-value {
  color: var(--ls-subtle-fg) !important;
}

input,
select,
textarea,
option,
.field-input,
.field-select,
.modal-input,
.modal-select,
.search-input,
.lib-search,
.sched-date-input {
  background-color: var(--ls-input-bg) !important;
  color: var(--ls-input-fg) !important;
}

button,
[role="button"] {
  text-shadow: none !important;
}

.login-submit,
.auth-btn-primary,
.tb-btn.primary,
.btn-primary,
.generate-btn,
.topic-card-btn,
.btn-add,
.btn-study,
.modal-btn.save,
.btn-approve,
.vb-ai-gen-btn,
.vb-ai-save-btn,
.vb-ai-toggle,
.view-btn.active,
.skip-link,
.nav-badge,
.sched-apply-btn,
.sd-save-btn:not([style*="transparent"]),
.sca-btn:not(.sca-btn-primary),
.lib-btn.primary,
.source-tab.active,
.ss-cat-pill.active,
.ss-dur-pill.active,
.as-chip.active,
.flows-tab.active,
.lib-filter-pill.active,
.lib-tab.active,
.lib-view-btn.active {
  background-color: var(--ls-action-bg) !important;
  border-color: var(--ls-action-bg) !important;
  color: var(--ls-action-fg) !important;
}

.login-submit *,
.auth-btn-primary *,
.tb-btn.primary *,
.btn-primary *,
.generate-btn *,
.topic-card-btn *,
.btn-add *,
.btn-study *,
.modal-btn.save *,
.btn-approve *,
.vb-ai-gen-btn *,
.vb-ai-save-btn *,
.vb-ai-toggle *,
.view-btn.active *,
.skip-link *,
.nav-badge *,
.sched-apply-btn *,
.sd-save-btn:not([style*="transparent"]) *,
.sca-btn:not(.sca-btn-primary) *,
.lib-btn.primary *,
.source-tab.active *,
.ss-cat-pill.active *,
.ss-dur-pill.active *,
.as-chip.active *,
.flows-tab.active *,
.lib-filter-pill.active *,
.lib-tab.active *,
.lib-view-btn.active * {
  color: var(--ls-action-fg) !important;
}

.btn-secondary,
.modal-btn.cancel,
.tb-btn.outline,
.row-btn,
.ss-action-btn,
.ss-lib-btn,
.lib-btn,
.source-tab,
.sd-save-btn[style*="transparent"],
.sched-clear-btn,
.search-clear-btn {
  background-color: var(--ls-secondary-bg) !important;
  color: var(--ls-secondary-fg) !important;
}

.btn-danger,
.btn-delete-account,
.profile-dropdown-logout:hover {
  background-color: var(--ls-danger-bg) !important;
  color: var(--ls-danger-fg) !important;
}

.settings-field-danger,
.login-error {
  background-color: var(--ls-danger-pale-bg) !important;
  color: var(--ls-danger-pale-fg) !important;
}

.profile-btn,
.teacher-avatar,
.level-badge,
.s-badge,
.sca-btn-primary,
.student-avatar {
  background-color: var(--ls-gold-bg) !important;
  color: var(--ls-gold-fg) !important;
}

.s-badge.level,
.level-badge {
  background-color: var(--ls-warning-pale-bg) !important;
  color: var(--ls-warning-pale-fg) !important;
}

.s-badge.course,
.student-dropdown-item[style*="var(--accessible-gold)"],
.enroll-combobox-item[style*="var(--accessible-gold)"] {
  background-color: var(--ls-selected-bg) !important;
  color: var(--ls-selected-fg) !important;
}

.ss-result-badge,
.fli-doc-link,
.vb-ai-preview,
.student-next,
.student-flow-strip,
.qs-autofill-note {
  background-color: var(--ls-teal-pale-bg) !important;
  color: var(--ls-teal-pale-fg) !important;
}

.btn-primary:hover,
.generate-btn:hover,
.topic-card-btn:hover,
.sca-btn:not(.sca-btn-primary):hover,
.modal-btn.save:hover,
.sd-save-btn:not([style*="transparent"]):hover {
  background-color: var(--ls-action-hover-bg) !important;
  color: var(--ls-action-fg) !important;
}

.vb-ai-card {
  background-color: var(--ls-dark-panel-bg) !important;
  color: var(--ls-dark-fg) !important;
}

.vb-ai-card *,
.vb-ai-card input,
.vb-ai-card textarea,
.vb-ai-card select,
.vb-ai-card input::placeholder,
.vb-ai-card textarea::placeholder {
  color: var(--ls-dark-fg) !important;
}

/* AI preview panel inside the dark card — restore dark text on the light panel */
.vb-ai-card .vb-ai-preview,
.vb-ai-card .vb-ai-preview *,
.vb-ai-card .vb-ai-preview th,
.vb-ai-card .vb-ai-preview td {
  color: var(--ls-surface-fg) !important;
}

/* Vocab bank list rows — force readable text regardless of cascade */
#vbBankList .vb-bank-title,
#vbBankList .vb-bank-meta,
#vbBankList .vb-bank-meta span {
  color: var(--ls-surface-fg) !important;
}

#vbBankList .s-badge.level {
  background-color: var(--ls-warning-pale-bg) !important;
  color: var(--ls-warning-pale-fg) !important;
}

.share-link-modal,
.share-link-modal .modal-body,
.share-link-modal-body,
.share-link-modal-body p,
.share-link-modal-body input {
  background-color: var(--ls-surface-bg) !important;
  color: var(--ls-surface-fg) !important;
}

[disabled],
[aria-disabled="true"],
:disabled {
  background-color: var(--ls-disabled-bg);
  color: var(--ls-disabled-fg) !important;
  opacity: 1 !important;
}

[style*="background:#000"],
[style*="background: #000"],
[style*="background:#0d1117"],
[style*="background: #0d1117"],
[style*="background:#0D1117"],
[style*="background: #0D1117"],
[style*="background:#0f172a"],
[style*="background: #0f172a"],
[style*="background:#0F172A"],
[style*="background: #0F172A"],
[style*="background:#111827"],
[style*="background: #111827"],
[style*="background:#1f2937"],
[style*="background: #1f2937"],
[style*="background:#1F2937"],
[style*="background: #1F2937"] {
  color: var(--ls-dark-fg) !important;
}

[style*="background:#000"] *,
[style*="background: #000"] *,
[style*="background:#0d1117"] *,
[style*="background: #0d1117"] *,
[style*="background:#0D1117"] *,
[style*="background: #0D1117"] *,
[style*="background:#0f172a"] *,
[style*="background: #0f172a"] *,
[style*="background:#0F172A"] *,
[style*="background: #0F172A"] *,
[style*="background:#111827"] *,
[style*="background: #111827"] *,
[style*="background:#1f2937"] *,
[style*="background: #1f2937"] *,
[style*="background:#1F2937"] *,
[style*="background: #1F2937"] * {
  color: var(--ls-dark-fg) !important;
}

.video-prompt-primary,
.video-prompt-primary * {
  background-color: #000000 !important;
  color: #FFFFFF !important;
}