/* =====================================================
   PYPATH — THEMES (CSS Custom Properties)
   Dark theme default, light theme via [data-theme="light"]
===================================================== */

/* ── Dark Theme (Default) ── */
[data-theme="dark"],
:root {
  /* Backgrounds */
  --bg-base:        #1a1a2e;
  --bg-surface:     #16213e;
  --bg-card:        #0f3460;
  --bg-card-hover:  #1a4070;
  --bg-code:        #0d1b33;
  --bg-output:      #080d1a;
  --bg-input:       #0f2044;
  --bg-sidebar:     #141428;
  --bg-navbar:      #12122299;
  --bg-overlay:     rgba(0, 0, 0, 0.6);

  /* Text */
  --text-primary:   #e8e4d9;
  --text-secondary: #c4bfb8;
  --text-muted:     #a8a4a0;
  --text-faint:     #6e6a66;
  --text-inverse:   #1a1a2e;

  /* Accent Colors */
  --accent-emerald:     #4ecca3;
  --accent-emerald-dim: #2a7a62;
  --accent-amber:       #e2b96f;
  --accent-amber-dim:   #8a6d35;
  --accent-teal:        #53c0f0;
  --accent-teal-dim:    #2a6a8a;

  /* Semantic / Module Colors */
  --color-m1: #4ecca3;   /* Module 1 – Fundamentals */
  --color-m2: #e2b96f;   /* Module 2 – Intermediate */
  --color-m3: #53c0f0;   /* Module 3 – Automation */
  --color-m4: #a855f7;   /* Module 4 – Data Science */
  --color-m5: #f97316;   /* Module 5 – ML */
  --color-m6: #ec4899;   /* Module 6 – CV */
  --color-m7: #06b6d4;   /* Module 7 – Deep Learning */
  --color-m8: #84cc16;   /* Module 8 – Best Practices */

  /* Borders */
  --border-subtle:  rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.12);
  --border-strong:  rgba(255, 255, 255, 0.24);
  --border-code:    #4ecca3;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.6);
  --shadow-glow: 0 0 20px rgba(78, 204, 163, 0.15);

  /* Callout Backgrounds */
  --callout-pitfall-bg:  rgba(239, 68, 68, 0.1);
  --callout-pitfall-border: #ef4444;
  --callout-tip-bg:      rgba(78, 204, 163, 0.08);
  --callout-tip-border:  #4ecca3;
  --callout-note-bg:     rgba(83, 192, 240, 0.08);
  --callout-note-border: #53c0f0;
  --callout-takeaway-bg: rgba(226, 185, 111, 0.08);
  --callout-takeaway-border: #e2b96f;

  /* Scrollbar */
  --scrollbar-thumb: #2a3a5a;
  --scrollbar-track: #12122200;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-med:  250ms ease;
  --transition-slow: 400ms ease;
}

/* ── Light Theme ── */
[data-theme="light"] {
  --bg-base:        #faf8f5;
  --bg-surface:     #f0ede8;
  --bg-card:        #e8e3da;
  --bg-card-hover:  #ddd8ce;
  --bg-code:        #f5f3ef;
  --bg-output:      #ebebeb;
  --bg-input:       #e8e3da;
  --bg-sidebar:     #f0ede8;
  --bg-navbar:      #faf8f5cc;
  --bg-overlay:     rgba(0, 0, 0, 0.3);

  --text-primary:   #1a1a2e;
  --text-secondary: #2d2d4e;
  --text-muted:     #5a5870;
  --text-faint:     #9090b0;
  --text-inverse:   #faf8f5;

  --accent-emerald:     #2a7a62;
  --accent-emerald-dim: #b8e8da;
  --accent-amber:       #8a5a10;
  --accent-amber-dim:   #f5e5c8;
  --accent-teal:        #1a6080;
  --accent-teal-dim:    #c0e4f5;

  --border-subtle:  rgba(0, 0, 0, 0.06);
  --border-default: rgba(0, 0, 0, 0.12);
  --border-strong:  rgba(0, 0, 0, 0.24);
  --border-code:    #2a7a62;

  --shadow-sm:  0 1px 3px rgba(0,0,0,0.1);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.12);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.16);
  --shadow-glow: 0 0 20px rgba(42, 122, 98, 0.12);

  --callout-pitfall-bg:  rgba(239, 68, 68, 0.06);
  --callout-pitfall-border: #dc2626;
  --callout-tip-bg:      rgba(42, 122, 98, 0.06);
  --callout-tip-border:  #2a7a62;
  --callout-note-bg:     rgba(26, 96, 128, 0.06);
  --callout-note-border: #1a6080;
  --callout-takeaway-bg: rgba(138, 90, 16, 0.06);
  --callout-takeaway-border: #8a5a10;

  --scrollbar-thumb: #c8c0b8;
  --scrollbar-track: transparent;
}

/* ── Theme transition ──
   Only animate theme changes on key elements.
   The wildcard * selector causes layout thrashing on large pages.
*/
body,
.navbar,
.sidebar,
.toc-sidebar,
.main-content,
.module-card,
.feature-card,
.callout,
.try-it,
.takeaways,
.mini-challenge,
.code-block-header,
.btn-nav,
.btn-primary,
.btn-secondary,
.search-input,
.theme-toggle,
.scroll-top,
.site-footer,
.lesson-link,
.module-header,
.breadcrumb,
.search-dropdown,
.progress-pill {
  transition: background-color var(--transition-med),
              border-color var(--transition-med),
              color var(--transition-fast);
}

/* Disable transition on code elements for perf */
pre, code, .no-transition {
  transition: none !important;
}