/* ========================================
   CARAMEL THEME - Lesson Reader Mode
   ======================================== */
   
/* 1. Base Theme Colors */
body.caramel {
  background: linear-gradient(to bottom right, #FCF5D5, #F5E6B8) !important;
  color: #2C1810;
}

/* 2. The Main Content Box (Paper effect) */
body.caramel .content-box {
  background-color: #FCF5D5 !important;
  box-shadow: 0 4px 15px rgba(44, 24, 16, 0.1) !important;
  border: 1px solid rgba(139, 69, 19, 0.1);
}

/* 3. Typography (Headings & Text) */
body.caramel .lesson-content h1,
body.caramel .lesson-content h2,
body.caramel .lesson-content h3,
body.caramel .lesson-content h4 {
  color: #2C1810 !important;
  border-bottom-color: rgba(139, 69, 19, 0.2) !important;
}

body.caramel .lesson-content p,
body.caramel .lesson-content li,
body.caramel .lesson-content div:not(.formula-box):not(.common-mistakes):not(.board-work) {
  color: #2C1810 !important;
  /* Charis SIL is already inherited from base.css, but we enforce color here */
}

/* 4. Navbar */
body.caramel .navbar {
  background: rgba(252, 245, 213, 0.95) !important;
  border-bottom: 1px solid rgba(139, 69, 19, 0.2);
  box-shadow: none !important;
}

body.caramel .navbar-logo,
body.caramel .navbar-link,
body.caramel .navbar-title {
  color: #2C1810 !important;
}

/* 5. Sidebar */
body.caramel .lesson-sidebar {
  background-color: rgba(252, 245, 213, 0.98) !important;
  border-right: 1px solid rgba(139, 69, 19, 0.1);
}

body.caramel .sidebar-section-title {
  color: #8B4513 !important;
}

body.caramel .sidebar-tab {
  color: #5D4037 !important;
}

body.caramel .sidebar-tab:hover {
  background-color: rgba(139, 69, 19, 0.05) !important;
}

body.caramel .sidebar-tab-active {
  background-color: rgba(139, 69, 19, 0.1) !important;
  color: #2C1810 !important;
  border-left-color: #8B4513 !important;
}

/* 6. Breadcrumbs */
body.caramel .breadcrumb-link,
body.caramel .breadcrumb-separator,
body.caramel .breadcrumb-current {
  color: #5D4037 !important;
}

/* 7. Loading Spinner Color */
body.caramel .spinner {
  border-color: rgba(139, 69, 19, 0.1);
  border-top-color: #8B4513;
}

/* ── Fix: board-work text color override ── */
body.caramel .lesson-content .board-work,
body.caramel .lesson-content .board-work * {
  color: #ffffff !important;
}

body.caramel .lesson-content .board-work {
  background: #1a1a2e !important;
}

/* Tables inside dark .board-work need dark-theme row striping */
body.caramel .lesson-content .board-work table,
body.caramel .lesson-content .board-work td,
body.caramel .lesson-content .board-work th {
  color: #ffffff !important;
  background: transparent !important;
}

body.caramel .lesson-content .board-work tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.08) !important;
}

body.caramel .lesson-content .board-work th {
  background: #2E75B6 !important;
}
 
body.caramel .lesson-content .board-label {
  color: #FFD700 !important;
}

body.caramel .lesson-content .formula-box p,
body.caramel .lesson-content .formula-box span {
  color: unset;
}

body.caramel .lesson-content .common-mistakes p,
body.caramel .lesson-content .common-mistakes span {
  color: unset;
}