/* ============================================================
   CBT NEET UG.COM — Three Display Modes
   Core brand colors (navy/blue) are PRESERVED across all modes.
   Only surface backgrounds, text tones, and card chrome change.
   ============================================================ */

/* ============ NORMAL MODE (default) ============
   Same as :root in style.css — no overrides needed.
   Kept here as an explicit anchor for clarity. */
body[data-theme="normal"] {
  --page-bg:     #f5f7fa;
  --card-bg:     #ffffff;
  --header-bg:   #ffffff;
  --text-dark:   #1a2332;
  --text-label:  #1a2332;
  --text-muted:  #6b7c93;
  --border-soft: #e4e9f0;
  --border-mid:  #cfd8e3;
  --input-bg:    #ffffff;
  --hover-grey:  #eef2f8;
}

/* ============ LIGHT MODE — "Kindle Reading" ============
   Warm off-white paper tone, easy on the eyes.
   Core navy brand is UNCHANGED. */
body[data-theme="light"] {
  --page-bg:     #f5efe0;   /* kindle paper */
  --card-bg:     #fbf6ea;   /* card paper */
  --header-bg:   #f9f2df;
  --text-dark:   #2a2620;
  --text-label:  #2a2620;
  --text-muted:  #6b6559;
  --border-soft: #e6dcc4;
  --border-mid:  #d6c9a8;
  --input-bg:    #fdf9ef;
  --hover-grey:  #ece2c9;
}
body[data-theme="light"] .site-footer {
  background: #2a2620;
}
body[data-theme="light"] .theme-switch {
  background: #ece2c9;
  border-color: #d6c9a8;
}

/* ============ DARK MODE — "Night Study" ============
   Gray + dark blue surfaces. Core navy brand preserved. */
body[data-theme="dark"] {
  --page-bg:     #1a1f2e;   /* dark blue-gray */
  --card-bg:     #242b3d;   /* elevated card */
  --header-bg:   #1e2434;
  --text-dark:   #e6ebf5;
  --text-label:  #e6ebf5;
  --text-muted:  #9aa5bd;
  --border-soft: #2f3648;
  --border-mid:  #3a4257;
  --input-bg:    #2a3145;
  --hover-grey:  #2c3448;

  --shadow-soft: 0 1px 3px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.3);
  --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.5);
}
body[data-theme="dark"] .navy-main {
  background-color: #131824;
}
body[data-theme="dark"] .site-footer {
  background: #0d111c;
}
body[data-theme="dark"] .panel-dark {
  background: #1e2434;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5),
              inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
body[data-theme="dark"] .logo-main { color: #e6ebf5; }
body[data-theme="dark"] .logo-accent { color: #6aa6e6; }
body[data-theme="dark"] .btn-nav { color: #e6ebf5; }
body[data-theme="dark"] .btn-nav:hover { background: #2c3448; }
body[data-theme="dark"] .btn-nav-primary { background: #1e5a96; }
body[data-theme="dark"] .btn-nav-primary:hover { background: #2a6db0; }
body[data-theme="dark"] .btn-navy { background: #1e5a96; }
body[data-theme="dark"] .btn-navy:hover { background: #2a6db0; }
body[data-theme="dark"] .theme-switch {
  background: #2a3145;
  border-color: #3a4257;
}
body[data-theme="dark"] .tm-btn { color: #9aa5bd; }
body[data-theme="dark"] .tm-btn.tm-active { color: #ffffff; }
body[data-theme="dark"] .tm-btn:hover { color: #ffffff; }
body[data-theme="dark"] .tm-indicator {
  background: #1e5a96;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
body[data-theme="dark"] .select {
  background: #2a3145;
  color: #e6ebf5;
  border-color: #3a4257;
}
body[data-theme="dark"] .proctor-badge {
  background: #103340;
  color: #7fd7ef;
}
body[data-theme="dark"] .lg-input {
  background: #2a3145;
  color: #e6ebf5;
  border-color: #3a4257;
}
body[data-theme="dark"] .login-main {
  background: #131824;
}
body[data-theme="dark"] .m-btn {
  background: #2a3145;
  color: #e6ebf5;
  border-color: #3a4257;
}

/* Keep the logo legible on darker display modes */
[data-theme="dark"] .site-header .logo {
  background: #ffffff;
  border-radius: 8px;
  padding: 4px 8px;
}

/* Kindle mode must be genuinely light: remove the dark navy landing canvas while preserving brand accents. */
body[data-theme="light"] .navy-main {
  background: var(--page-bg);
}
body[data-theme="light"] .panel-dark {
  background: var(--card-bg);
  color: var(--text-dark);
  border: 1px solid var(--border-soft);
  box-shadow: 0 10px 30px rgba(15,44,89,.08);
}
body[data-theme="light"] .panel-dark .video-wrapper,
body[data-theme="light"] .panel-dark .video-shell {
  background: #e9e0cc;
}
body[data-theme="light"] .welcome {
  color: var(--text-dark);
}
body[data-theme="light"] .welcome p {
  color: var(--text-muted);
}