/* ============================================================
   ClearMind — Color Themes
   ============================================================
   Applied via body.theme-{name} class.
   Default (sage) is defined in app.css :root.
   ============================================================ */

/* ── Ocean ──────────────────────────────────────────── */
body.theme-ocean {
  --sage: #0ea5e9;
  --sage-light: #38bdf8;
  --amber: #f59e0b;
  --amber-light: #fcd34d;
}

body.theme-ocean.dark {
  --sage: #38bdf8;
  --sage-light: #7dd3fc;
  --amber: #fbbf24;
}

/* ── Sunset ─────────────────────────────────────────── */
body.theme-sunset {
  --sage: #f97316;
  --sage-light: #fb923c;
  --amber: #ef4444;
  --amber-light: #f87171;
}

body.theme-sunset.dark {
  --sage: #fb923c;
  --sage-light: #fdba74;
  --amber: #f87171;
}

/* ── Forest ─────────────────────────────────────────── */
body.theme-forest {
  --sage: #166534;
  --sage-light: #15803d;
  --amber: #854d0e;
  --amber-light: #a16207;
}

body.theme-forest.dark {
  --sage: #4ade80;
  --sage-light: #86efac;
  --amber: #fbbf24;
}

/* ── Royal ──────────────────────────────────────────── */
body.theme-royal {
  --sage: #7c3aed;
  --sage-light: #8b5cf6;
  --amber: #db2777;
  --amber-light: #ec4899;
}

body.theme-royal.dark {
  --sage: #a78bfa;
  --sage-light: #c4b5fd;
  --amber: #f472b6;
}

/* ── Global dark mode overrides ─────────────────────── */
body.dark .ring-bg { stroke: rgba(255,255,255,0.07); }
body.dark .option-btn { background: var(--cream); }
body.dark .btn-google { background: var(--card); }
body.dark .auth-tab { background: var(--paper); }
body.dark code { background: rgba(255,255,255,0.08); }

/* Buttons that use --ink as background become cream in dark mode;
   switch text to --paper so it stays legible */
body.dark .btn-primary { color: var(--paper); }
body.dark .filter-tab.active { color: var(--paper); }
body.dark .mode-btn.active { color: var(--paper); }

/* ── Dark-mode depth system ─────────────────────────────
   Premium dark UIs read as "designed" through structure, not
   colour: layered elevation, a 1px top highlight, hairline
   borders and a soft two-part shadow. All scoped to body.dark
   so light mode is untouched. */

/* Glassmorphism nav — dark variant */
body.dark .app-nav {
  background: rgba(12,12,11,0.72);
  border-bottom: 1px solid var(--hairline);
  box-shadow: 0 1px 0 rgba(255,255,255,0.02), 0 10px 30px -16px rgba(0,0,0,0.8);
}

/* Elevated surfaces: subtle top sheen + top highlight + soft shadow.
   Note: we deliberately don't set border-color here — the base
   `1px solid var(--border)` already gives a warm hairline, and a
   blanket border-color would override semantic borders such as the
   coloured toast accents and the overdue-assignment indicator. */
body.dark .dash-widget,
body.dark .settings-card,
body.dark .quiz-card,
body.dark .assignment-card,
body.dark .feature-card,
body.dark .chat-container,
body.dark .chat-input-area {
  background-image: var(--surface-sheen);
  box-shadow: var(--lift), var(--shadow);
}

/* Modal, dropdown, and toast sit highest — stronger shadow */
body.dark #modal-content,
body.dark .nav-dropdown,
body.dark .toast {
  background-image: var(--surface-sheen);
  box-shadow: var(--lift), var(--shadow-lg);
}

/* Retire the loud sage stripe that screams "template" in dark mode —
   the top highlight already gives these cards their lift. */
body.dark .dash-widget,
body.dark .settings-card {
  border-top: 1px solid var(--hairline);
}

/* Raised insets (stat tiles, AI bubble) get their own faint highlight */
body.dark .stat-item,
body.dark .chat-bubble.ai .bubble-content {
  border: 1px solid var(--hairline);
  box-shadow: var(--lift);
}

/* Recessed controls read as carved-in rather than floating */
body.dark .qa-btn,
body.dark #chat-input,
body.dark .form-group input,
body.dark .form-group textarea,
body.dark .form-group select,
body.dark .form-select {
  background: #0a0a09;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.4);
}

/* Hover lift for interactive cards (deeper shadow only, so semantic
   borders like overdue-assignment red survive the hover state) */
body.dark .feature-card:hover,
body.dark .quiz-card:hover,
body.dark .assignment-card:hover {
  box-shadow: var(--lift), 0 1px 2px rgba(0,0,0,0.5), 0 22px 48px -12px rgba(0,0,0,0.7);
}
body.dark .qa-btn:hover { background: var(--cream); border-color: var(--sage); }

/* Logout button hover used a near-white tint — give it a red wash in dark */
body.dark .btn-logout:hover { background: rgba(239,68,68,0.12); }
body.dark .hint-chip:hover,
body.dark .nav-profile:hover { box-shadow: 0 0 0 3px rgba(95,170,152,0.10); }

/* Quieter accent dot on the active nav link */
body.dark .nav-link.active::after { box-shadow: 0 0 6px rgba(95,170,152,0.6); }

/* Custom slim scrollbar inside dark chat/scroll areas */
body.dark .chat-messages::-webkit-scrollbar { width: 8px; }
body.dark .chat-messages::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
}
body.dark .chat-messages::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.14); }