/* =========================================
   CODY ACADEMY
   GLOBAL THEME SYSTEM
   Dark Mode + Light Mode
========================================= */

/* =========================================
   1. DARK THEME
========================================= */

html[data-theme="dark"] {
  color-scheme: dark;

  --dark-bg: #080B18;
  --dark-surface: #11182B;
  --dark-glass: rgba(17, 24, 43, 0.82);
  --dark-glass-heavy: rgba(8, 12, 26, 0.96);
  --dark-border: rgba(255, 255, 255, 0.10);

  --dark-text: #F4F6FF;
  --dark-muted: #A7B1C7;

  --dark-cyan: #22D3EE;
  --dark-purple: #A78BFA;
  --dark-gold: #FBBF24;
  --dark-green: #34D399;
  --dark-coral: #FB7185;

  --bg: #080B18;
  --bg-deep: #060814;
  --surface: #11182B;
  --surface-raised: #171F38;
  --surface-glass: rgba(17, 24, 43, 0.82);

  --border: rgba(177, 190, 255, 0.12);
  --border-hover: rgba(34, 211, 238, 0.35);

  --text: #F4F6FF;
  --panel: rgba(17, 24, 43, 0.88);
  --muted: #A7B1C7;

  --bg-base: #080B18;
  --bg-panel: #11182B;
  --bg-card: rgba(17, 24, 43, 0.82);
  --bg-surface: #11182B;

  --border-soft: rgba(255, 255, 255, 0.10);
  --text-main: #F4F6FF;
  --text-primary: #F4F6FF;
  --text-muted: #A7B1C7;

  --primary: #A78BFA;
  --primary-color: #A78BFA;
  --accent-green: #34D399;
  --success: #34D399;
  --danger: #FB7185;
  --reward: #FBBF24;

  --theme-body-bg: #080B18;
  --theme-body-text: #F4F6FF;
  --theme-card-bg: #11182B;
  --theme-card-border: rgba(255, 255, 255, 0.10);
  --theme-input-bg: #0C1325;
  --theme-input-text: #F4F6FF;
  --theme-input-border: #303B55;
  --theme-hover-bg: #1B2640;
  --theme-shadow: 0 12px 35px rgba(0, 0, 0, 0.25);
}

/* =========================================
   2. LIGHT THEME
========================================= */

html[data-theme="light"] {
  color-scheme: light;

  --dark-bg: #F5F7FC;
  --dark-surface: #FFFFFF;
  --dark-glass: rgba(255, 255, 255, 0.94);
  --dark-glass-heavy: rgba(255, 255, 255, 0.98);
  --dark-border: #E2E7F0;

  --dark-text: #182235;
  --dark-muted: #64748B;

  --dark-cyan: #0891B2;
  --dark-purple: #7652D5;
  --dark-gold: #B77908;
  --dark-green: #0F9468;
  --dark-coral: #D94862;

  --bg: #F5F7FC;
  --bg-deep: #EEF2F8;
  --surface: #FFFFFF;
  --surface-raised: #F8FAFF;
  --surface-glass: rgba(255, 255, 255, 0.94);

  --border: #E2E7F0;
  --border-hover: rgba(8, 145, 178, 0.38);

  --text: #182235;
  --panel: #FFFFFF;
  --muted: #64748B;

  --bg-base: #F5F7FC;
  --bg-panel: #FFFFFF;
  --bg-card: #FFFFFF;
  --bg-surface: #FFFFFF;

  --border-soft: #E2E7F0;
  --text-main: #182235;
  --text-primary: #182235;
  --text-muted: #64748B;

  --primary: #7652D5;
  --primary-color: #7652D5;
  --accent-green: #0F9468;
  --success: #0F9468;
  --danger: #D94862;
  --reward: #B77908;

  --theme-body-bg: #F5F7FC;
  --theme-body-text: #182235;
  --theme-card-bg: #FFFFFF;
  --theme-card-border: #E2E7F0;
  --theme-input-bg: #FFFFFF;
  --theme-input-text: #182235;
  --theme-input-border: #D7DFEB;
  --theme-hover-bg: #F0F4FA;
  --theme-shadow: 0 12px 35px rgba(25, 45, 80, 0.08);
}

/* =========================================
   3. GLOBAL BASE
========================================= */

html {
  min-height: 100%;
  color-scheme: dark;
  background: var(--theme-body-bg, #080B18);
}

body {
  min-height: 100vh;
  color: var(--theme-body-text, #F4F6FF);
  background-color: var(--theme-body-bg, #080B18);
  transition:
    background-color 180ms ease,
    color 180ms ease;
}

/* Prevent theme changes from breaking form controls. */

html,
body,
button,
input,
textarea,
select {
  color-scheme: inherit;
}

/* =========================================
   4. COMMON CARDS AND PANELS
========================================= */

html[data-theme="light"] .sidebar,
html[data-theme="light"] .glass-card,
html[data-theme="light"] .topbar,
html[data-theme="light"] .space-topbar,
html[data-theme="light"] .settings-group,
html[data-theme="light"] .panel,
html[data-theme="light"] .lesson-heading,
html[data-theme="light"] .card,
html[data-theme="light"] .modal-content,
html[data-theme="light"] .profile-card,
html[data-theme="light"] .stat-card,
html[data-theme="light"] .course-card {
  color: var(--text);
  background-color: var(--theme-card-bg);
  border-color: var(--theme-card-border);
}

/* =========================================
   5. TEXT COLORS
========================================= */

html[data-theme="light"] {
  --heading-color: #182235;
  --paragraph-color: #334155;
  --secondary-text-color: #64748B;
}

html[data-theme="light"] h1,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4,
html[data-theme="light"] h5,
html[data-theme="light"] h6 {
  color: var(--heading-color);
}

html[data-theme="light"] p,
html[data-theme="light"] label {
  color: var(--paragraph-color);
}

html[data-theme="light"] .muted,
html[data-theme="light"] .setting-info p,
html[data-theme="light"] .sidebar-caption,
html[data-theme="light"] .text-muted {
  color: var(--secondary-text-color);
}

/* =========================================
   6. INPUTS AND FORMS
========================================= */

html[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="light"] textarea,
html[data-theme="light"] select {
  color: var(--theme-input-text);
  background-color: var(--theme-input-bg);
  border-color: var(--theme-input-border);
}

html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder {
  color: #94A3B8;
  opacity: 1;
}

html[data-theme="light"] input:focus,
html[data-theme="light"] textarea:focus,
html[data-theme="light"] select:focus {
  border-color: #0891B2;
  outline-color: rgba(8, 145, 178, 0.2);
}

/* =========================================
   7. NAVIGATION
========================================= */

html[data-theme="light"] .nav-item {
  color: #526078;
}

html[data-theme="light"] .nav-item:hover {
  color: #182235;
  background-color: #F0F4FA;
}

html[data-theme="light"] .nav-item.active {
  color: #087F9B;
  background-color: #E5F7FB;
}

/* =========================================
   8. BUTTONS
========================================= */

html[data-theme="light"] .secondary-btn,
html[data-theme="light"] .back-btn {
  color: #26354D;
  background-color: #F1F4F9;
  border-color: #DCE3EF;
}

html[data-theme="light"] .secondary-btn:hover,
html[data-theme="light"] .back-btn:hover {
  background-color: #E7EDF6;
}

/* =========================================
   9. LESSONS AND QUIZZES
========================================= */

html[data-theme="light"] .hint-box,
html[data-theme="light"] .task,
html[data-theme="light"] .quiz-option {
  color: #26354D;
  background-color: #F7F9FD;
  border-color: #DCE3EF;
}

html[data-theme="light"] .quiz-option:hover {
  background-color: #EDF4FC;
}

/* =========================================
   10. CODE EDITOR AND TERMINAL
   Keep coding surfaces dark in both themes.
========================================= */

html[data-theme="light"] .editor,
html[data-theme="light"] .terminal,
html[data-theme="light"] .code-editor,
html[data-theme="light"] .code-terminal,
html[data-theme="light"] .monaco-editor,
html[data-theme="light"] .cm-editor {
  color: #D9EDFF;
  background-color: #07101F;
}

/* Preserve readable editor text. */

html[data-theme="light"] .editor *,
html[data-theme="light"] .terminal *,
html[data-theme="light"] .code-editor *,
html[data-theme="light"] .code-terminal * {
  color: inherit;
}

/* =========================================
   11. TABLES AND DIVIDERS
========================================= */

html[data-theme="light"] table {
  color: #182235;
  border-color: #E2E7F0;
}

html[data-theme="light"] th {
  color: #26354D;
  background-color: #F0F4FA;
}

html[data-theme="light"] td {
  border-color: #E2E7F0;
}

html[data-theme="light"] hr,
html[data-theme="light"] .divider {
  border-color: #E2E7F0;
}

/* =========================================
   12. LINKS
========================================= */

html[data-theme="light"] a {
  text-decoration-color: currentColor;
}

/* =========================================
   13. MODALS AND DROPDOWNS
========================================= */

html[data-theme="light"] .dropdown-menu,
html[data-theme="light"] .dropdown-content,
html[data-theme="light"] .menu-dropdown,
html[data-theme="light"] .popover,
html[data-theme="light"] .modal,
html[data-theme="light"] .modal-box {
  color: #182235;
  background-color: #FFFFFF;
  border-color: #E2E7F0;
  box-shadow: var(--theme-shadow);
}

/* =========================================
   14. DARK THEME BODY
========================================= */

html[data-theme="dark"] body {
  color: #F4F6FF;
  background-color: #080B18;
}

/* =========================================
   15. MOTION SETTINGS
========================================= */

html[data-motion="off"] *,
html[data-motion="off"] *::before,
html[data-motion="off"] *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

/* Respect the device accessibility preference
   unless the user explicitly enabled motion. */

@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="on"]) *,
  html:not([data-motion="on"]) *::before,
  html:not([data-motion="on"]) *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================
   16. THEME TRANSITIONS
========================================= */

html[data-theme-transition="on"] body,
html[data-theme-transition="on"] .sidebar,
html[data-theme-transition="on"] .topbar,
html[data-theme-transition="on"] .glass-card,
html[data-theme-transition="on"] .settings-group,
html[data-theme-transition="on"] .profile-card,
html[data-theme-transition="on"] .stat-card,
html[data-theme-transition="on"] .course-card {
  transition:
    background-color 180ms ease,
    color 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

/* =========================================
   17. ACCESSIBILITY
========================================= */

:focus-visible {
  outline: 2px solid var(--dark-cyan, #22D3EE);
  outline-offset: 3px;
}

@media (forced-colors: active) {
  button,
  input,
  textarea,
  select,
  a {
    forced-color-adjust: auto;
  }
}

/* =========================================
   18. AUTHENTICATION PAGES
   Keep login and signup synchronized with the
   same saved site-wide theme.
========================================= */

html[data-theme="dark"] {
  --background: #080B18;
  --surface: #11182B;
  --text: #F4F6FF;
  --muted: #A7B1C7;
  --border: rgba(177, 190, 255, 0.16);
}

html[data-theme="light"] {
  --background: #F5F7FC;
  --surface: #FFFFFF;
  --text: #182235;
  --muted: #64748B;
  --border: #E2E7F0;
}

html[data-theme="dark"] .auth-card {
  color: var(--text);
  background: #11182B;
  border-color: rgba(177, 190, 255, 0.16);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .auth-card h1,
html[data-theme="dark"] .auth-card .form-group label {
  color: #F4F6FF;
}

html[data-theme="dark"] .auth-card .subtitle,
html[data-theme="dark"] .auth-card .auth-links,
html[data-theme="dark"] .auth-card .hint {
  color: #A7B1C7;
}

html[data-theme="dark"] .auth-card .input-field {
  color: #F4F6FF;
  background: #0C1325;
  border-color: #303B55;
}

html[data-theme="dark"] .auth-card .input-field:focus {
  background: #11182B;
}

html[data-theme="dark"] .auth-card .back-home {
  color: #A7B1C7;
}

/* Common theme-aware surfaces used by standalone pages. */
html[data-theme="dark"] .settings-group,
html[data-theme="dark"] .glass-card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .card,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .profile-card,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .course-card {
  color: var(--text);
  border-color: var(--border);
  background-color: var(--surface);
}

html[data-theme="light"] .auth-card {
  color: #182235;
  background: #FFFFFF;
  border-color: #E2E7F0;
}

html[data-theme="light"] .auth-card .input-field {
  color: #182235;
  background: #F8FAFC;
}