/* ═══════════════════════════════════════════════════════════════
   MSM Aventra — Theme System v2 (Stunning Light & Dark)
═══════════════════════════════════════════════════════════════ */

/* ─── DARK THEME (default) ──────────────────────────────────── */
:root,
[data-theme="dark"] {
  --red: #e51c23;
  --red-light: #ff4757;
  --red-dark: #b71c1c;
  --blue: #0ea5e9;
  --blue-light: #38bdf8;
  --blue-dark: #0284c7;
  --gold: #f59e0b;
  --green: #10b981;

  --bg-primary: #070910;
  --bg-secondary: #0d1018;
  --bg-tertiary: #131620;
  --bg-card: #0f1219;
  --bg-card2: #141824;
  --bg-glass: rgba(15,18,25,0.85);
  --bg-mesh: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(229,28,35,0.08) 0%, transparent 60%),
             radial-gradient(ellipse 60% 40% at 80% 100%, rgba(14,165,233,0.06) 0%, transparent 60%);

  --text-primary: #f0f4ff;
  --text-secondary: #c8d0e0;
  --text-muted: #7a8699;
  --text-faint: #3a4558;

  --border: rgba(255,255,255,0.06);
  --border-accent: rgba(229,28,35,0.25);
  --border-hover: rgba(229,28,35,0.45);

  --shadow-sm: 0 2px 8px rgba(0,0,0,0.5);
  --shadow-md: 0 8px 32px rgba(0,0,0,0.6);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.7);
  --shadow-red: 0 8px 40px rgba(229,28,35,0.2);
  --shadow-blue: 0 8px 40px rgba(14,165,233,0.15);
  --shadow-card: 0 4px 24px rgba(0,0,0,0.4);

  --nav-bg: rgba(7,9,16,0.96);
  --footer-bg: #040508;

  --tag-bg: rgba(229,28,35,0.1);
  --tag-border: rgba(229,28,35,0.2);
  --tag-color: #ff4757;

  --input-bg: rgba(255,255,255,0.04);
  --input-border: rgba(255,255,255,0.09);
  --input-focus: rgba(229,28,35,0.3);

  --hero-grad-1: rgba(229,28,35,0.12);
  --hero-grad-2: rgba(14,165,233,0.10);

  --trust-bg: #0d1018;
  --module-bg: #0d1018;
  --logo-text: #f0f4ff;
  --logo-sub: #8892a4;
}

/* ─── LIGHT THEME — Premium White ────────────────────────────── */
[data-theme="light"] {
  --bg-primary: #f6f7fb;
  --bg-secondary: #ffffff;
  --bg-tertiary: #eef0f8;
  --bg-card: #ffffff;
  --bg-card2: #f4f5fc;
  --bg-glass: rgba(255,255,255,0.95);
  --bg-mesh: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(229,28,35,0.06) 0%, transparent 60%),
             radial-gradient(ellipse 60% 40% at 80% 100%, rgba(14,165,233,0.05) 0%, transparent 60%);

  --text-primary: #0b0f1e;
  --text-secondary: #1a2340;
  --text-muted: #4e5b7a;
  --text-faint: #8a96b0;

  --border: rgba(15,20,50,0.08);
  --border-accent: rgba(229,28,35,0.18);
  --border-hover: rgba(229,28,35,0.38);

  --shadow-sm: 0 2px 8px rgba(10,15,40,0.06);
  --shadow-md: 0 8px 32px rgba(10,15,40,0.08);
  --shadow-lg: 0 20px 60px rgba(10,15,40,0.12);
  --shadow-red: 0 8px 40px rgba(229,28,35,0.1);
  --shadow-blue: 0 8px 40px rgba(14,165,233,0.1);
  --shadow-card: 0 4px 24px rgba(10,15,40,0.07), 0 1px 3px rgba(10,15,40,0.04);

  --nav-bg: rgba(255,255,255,0.97);
  --footer-bg: #080c18;

  --tag-bg: rgba(229,28,35,0.07);
  --tag-border: rgba(229,28,35,0.14);
  --tag-color: #c51018;

  --input-bg: rgba(10,15,40,0.03);
  --input-border: rgba(10,15,40,0.1);
  --input-focus: rgba(229,28,35,0.2);

  --hero-grad-1: rgba(229,28,35,0.06);
  --hero-grad-2: rgba(14,165,233,0.05);

  --trust-bg: #ffffff;
  --module-bg: #ffffff;
  --logo-text: #0b0f1e;
  --logo-sub: #5a6480;
}

/* ─── BASE ──────────────────────────────────────────────────── */
body {
  background: var(--bg-primary);
  color: var(--text-primary);
  transition: background 0.35s ease, color 0.35s ease;
}

/* ─── NAVBAR THEME ───────────────────────────────────────────── */
.navbar {
  background: transparent;
  transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.navbar.scrolled {
  background: var(--nav-bg) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.15);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.nav-links a { color: var(--text-muted); }
.nav-links a:hover { color: var(--text-primary); }
[data-theme="light"] .nav-links a { color: var(--text-muted); }
[data-theme="light"] .nav-links a:hover { color: var(--text-primary); }

/* ─── CARD THEMES ────────────────────────────────────────────── */
.platform-card, .outcome-card, .ai-feature-card,
.security-item, .testimonial-card, .global-stat-card,
.integration-category, .pricing-card, .module-mockup,
.step-icon-wrap, .uni-logo-item {
  background: var(--bg-card);
  border-color: var(--border);
  box-shadow: var(--shadow-card);
  color: var(--text-primary);
  transition: background 0.35s, border-color 0.35s, box-shadow 0.35s;
}

/* ─── LIGHT THEME CARD SPECIAL EFFECTS ──────────────────────── */
[data-theme="light"] .platform-card:hover,
[data-theme="light"] .outcome-card:hover,
[data-theme="light"] .ai-feature-card:hover {
  box-shadow: 0 12px 40px rgba(229,28,35,0.08), 0 4px 12px rgba(10,15,40,0.06);
  border-color: var(--border-accent);
}

[data-theme="light"] .platform-card--highlight {
  background: linear-gradient(135deg, #fff5f5 0%, #fef2f2 50%, #f0f9ff 100%);
  border-color: rgba(229,28,35,0.2);
  box-shadow: 0 8px 32px rgba(229,28,35,0.08);
}

/* ─── SECTION BG THEMES ──────────────────────────────────────── */
.what-is, .outcomes-section, .integrations-section,
.security-section, .pricing-section, .hero { background: var(--bg-primary); }

.trust-bar, .modules-section, .how-it-works,
.global-section, .testimonials-section, .university-logos-section {
  background: var(--bg-secondary);
}

.trust-bar { border-color: var(--border); }

/* ─── TEXT THEME ─────────────────────────────────────────────── */
.section-subtitle, .platform-card p, .outcome-card > p,
.ai-feature-card p, .security-item p, .testimonial-card > p,
.global-stat-label, .step-item p, .laul-text p,
.trust-item, .mock-label, .mock-course-meta,
.mock-activity-item, .mock-pipeline-label,
.kpi-lbl, .ai-msg--bot { color: var(--text-muted); }

.section-title, .module-info h3, .platform-card h3,
.ai-feature-card h4, .outcome-title, .step-item h4,
.security-item h4, .pricing-tier, .demo-text h2 {
  color: var(--text-primary);
}

/* ─── SECTION TAGS ───────────────────────────────────────────── */
.section-tag {
  background: var(--tag-bg);
  border-color: var(--tag-border);
  color: var(--tag-color);
}

/* ─── MOCKUP THEMES ──────────────────────────────────────────── */
.module-mockup { background: var(--bg-tertiary); }
.mockup-header { background: var(--bg-card2); border-color: var(--border); }
.mock-stat, .mock-student-card, .mock-course-card,
.mock-finance-item, .mock-kpi, .mock-live-session,
.portal-item { background: var(--bg-tertiary); border-color: var(--border); }
.mock-pipeline-bar { background: rgba(0,0,0,0.05); }
[data-theme="dark"] .mock-pipeline-bar { background: rgba(255,255,255,0.05); }

/* ─── INTEGRATION ────────────────────────────────────────────── */
.integration-item {
  background: var(--bg-tertiary);
  border-color: var(--border);
  color: var(--text-muted);
}
[data-theme="light"] .integration-item:hover {
  background: var(--bg-card);
  border-color: var(--border-accent);
  box-shadow: var(--shadow-md);
}

/* ─── MSM UNIFY BANNER ───────────────────────────────────────── */
.laul-group-banner {
  background: linear-gradient(135deg, rgba(229,28,35,0.05), rgba(14,165,233,0.03));
  border-color: rgba(229,28,35,0.12);
}
[data-theme="light"] .laul-group-banner {
  background: linear-gradient(135deg, #fff8f8, #f0f9ff);
  border-color: rgba(229,28,35,0.15);
  box-shadow: 0 4px 20px rgba(229,28,35,0.05);
}

/* ─── API CALLOUT ────────────────────────────────────────────── */
.api-callout {
  background: linear-gradient(135deg, rgba(229,28,35,0.06), rgba(14,165,233,0.04));
  border-color: rgba(229,28,35,0.15);
}

/* ─── FOOTER (always dark) ───────────────────────────────────── */
.footer { background: var(--footer-bg); }

/* ─── DEMO SECTION (always dark-ish) ────────────────────────── */
.demo-section {
  background: linear-gradient(135deg, #08050f 0%, #050a15 50%, #08050f 100%);
}
[data-theme="light"] .demo-section {
  background: linear-gradient(135deg, #0a0620 0%, #080f1e 50%, #0a0620 100%);
}
[data-theme="light"] .demo-form-wrapper {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.1);
}
[data-theme="light"] .form-group input,
[data-theme="light"] .form-group select {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
  color: #fff;
}

/* ─── AI ENGINE (always dark) ───────────────────────────────── */
.ai-engine-section {
  background: linear-gradient(135deg, #060910, #09101a, #060910);
}
[data-theme="light"] .ai-engine-section {
  background: linear-gradient(135deg, #050810, #070e18, #050810);
}

/* ─── HERO LIGHT MODE ────────────────────────────────────────── */
[data-theme="light"] .hero {
  background: linear-gradient(135deg, #f6f7fb 0%, #f9f6ff 50%, #f0f7ff 100%);
}
[data-theme="light"] .hero::before {
  background:
    radial-gradient(ellipse 60% 70% at 15% 50%, rgba(229,28,35,0.06) 0%, transparent 70%),
    radial-gradient(ellipse 60% 70% at 85% 50%, rgba(14,165,233,0.05) 0%, transparent 70%);
}
[data-theme="light"] .hero-stat .stat-num { color: var(--text-primary); }
[data-theme="light"] .hero-badge {
  background: rgba(229,28,35,0.06);
  border-color: rgba(229,28,35,0.18);
  color: var(--red);
}
[data-theme="light"] .hero-title { color: var(--text-primary); }
[data-theme="light"] .hero-subtitle { color: var(--text-muted); }
[data-theme="light"] .hero-scroll-indicator { color: var(--text-faint); }
[data-theme="light"] .scroll-line { background: var(--text-faint); }

/* ─── GLOBE LIGHT ────────────────────────────────────────────── */
[data-theme="light"] .globe-core {
  background: linear-gradient(135deg, rgba(229,28,35,0.12), rgba(14,165,233,0.1));
  border-color: rgba(229,28,35,0.3);
  color: var(--red);
}
[data-theme="light"] .globe-ring {
  border-color: rgba(229,28,35,0.12);
}

/* ─── MODULE TABS LIGHT ──────────────────────────────────────── */
[data-theme="light"] .modules-tabs {
  background: var(--bg-tertiary);
  border-color: var(--border);
}
[data-theme="light"] .module-tab { color: var(--text-muted); }
[data-theme="light"] .module-tab:hover {
  background: rgba(229,28,35,0.05);
  color: var(--text-primary);
}
[data-theme="light"] .module-tab.active {
  background: linear-gradient(135deg, var(--red-dark), var(--red));
  color: #fff;
}

/* ─── OUTCOMES LIGHT ─────────────────────────────────────────── */
[data-theme="light"] .outcome-card::after {
  background: linear-gradient(90deg, var(--red), var(--blue));
}
[data-theme="light"] .outcome-icon { color: var(--red); }

/* ─── PHONE MOCKUP LIGHT ─────────────────────────────────────── */
[data-theme="light"] .phone-mockup {
  background: #e4e8f2;
  border-color: var(--border);
}
[data-theme="light"] .phone-screen { background: #f0f4ff; }

/* ─── PRICING LIGHT ──────────────────────────────────────────── */
[data-theme="light"] .pricing-card--featured {
  background: linear-gradient(135deg, #fff0f0, #f0f8ff);
  border-color: rgba(229,28,35,0.25);
  box-shadow: 0 20px 60px rgba(229,28,35,0.1);
}

/* ─── HOW IT WORKS LIGHT ─────────────────────────────────────── */
[data-theme="light"] .step-icon-wrap {
  background: var(--bg-tertiary);
  border-color: var(--border);
}
[data-theme="light"] .step-number {
  background: linear-gradient(135deg, var(--red), var(--blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── TESTIMONIALS LIGHT ─────────────────────────────────────── */
[data-theme="light"] .testimonial-card {
  background: var(--bg-primary);
  box-shadow: 0 4px 20px rgba(10,15,40,0.06);
}

/* ─── TRUST BAR LIGHT ────────────────────────────────────────── */
[data-theme="light"] .trust-bar { background: var(--trust-bg); }
[data-theme="light"] .trust-item { color: var(--text-muted); }
[data-theme="light"] .trust-item i { color: var(--red); }

/* ─── UNIVERSITY LOGOS LIGHT ─────────────────────────────────── */
[data-theme="light"] .university-logos-section {
  background: var(--bg-secondary);
  border-color: var(--border);
}
[data-theme="light"] .uni-logo-item {
  background: var(--bg-tertiary);
  border-color: var(--border);
}
[data-theme="light"] .uni-logo-item:hover {
  background: var(--bg-card);
  border-color: var(--border-accent);
  box-shadow: 0 4px 20px rgba(229,28,35,0.07);
}

/* ─── BACK TO TOP LIGHT ──────────────────────────────────────── */
[data-theme="light"] .back-to-top {
  background: var(--red);
  box-shadow: 0 4px 20px rgba(229,28,35,0.3);
}

/* ─── TOAST LIGHT ────────────────────────────────────────────── */
[data-theme="light"] .toast {
  background: var(--bg-card);
  border-color: var(--border);
  color: var(--text-primary);
  box-shadow: 0 8px 40px rgba(10,15,40,0.12);
}

/* ─── CHATBOT LIGHT ──────────────────────────────────────────── */
[data-theme="light"] .chatbot-window {
  background: var(--bg-secondary);
  border-color: var(--border);
  box-shadow: 0 20px 60px rgba(10,15,40,0.14);
}
[data-theme="light"] .chat-messages { background: #f3f5fc; }
[data-theme="light"] .msg-bot {
  background: var(--bg-card);
  border-color: var(--border);
  color: var(--text-primary);
  box-shadow: 0 2px 8px rgba(10,15,40,0.06);
}
[data-theme="light"] .msg-user { background: var(--red); color: #fff; }
[data-theme="light"] .chat-input-row input {
  background: var(--bg-primary);
  border-color: var(--border);
  color: var(--text-primary);
}
[data-theme="light"] .chat-input-row input::placeholder { color: var(--text-faint); }
[data-theme="light"] .chatbot-header {
  background: linear-gradient(135deg, #b71c1c, #e51c23);
}
[data-theme="light"] .chatbot-footer {
  background: var(--bg-secondary);
  border-color: var(--border);
}

/* ─── THEME TOGGLE ───────────────────────────────────────────── */
.theme-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 6px 14px 6px 8px;
  cursor: pointer;
  transition: all 0.3s;
}
.theme-toggle:hover {
  border-color: var(--border-accent);
  box-shadow: var(--shadow-red);
}
.theme-toggle-track {
  width: 36px; height: 20px;
  background: var(--bg-tertiary);
  border-radius: 99px;
  position: relative;
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.theme-toggle-thumb {
  position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--red);
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), background 0.3s;
  box-shadow: 0 2px 6px rgba(229,28,35,0.4);
}
[data-theme="light"] .theme-toggle-thumb {
  transform: translateX(16px);
  background: var(--blue);
  box-shadow: 0 2px 6px rgba(14,165,233,0.4);
}
.theme-toggle-icon { font-size: 13px; line-height: 1; transition: all 0.3s; }
.theme-toggle-label {
  font-size: 12px; font-weight: 600;
  color: var(--text-muted); white-space: nowrap;
}

/* ─── MISC LIGHT OVERRIDES ───────────────────────────────────── */
[data-theme="light"] .nav-logo { color: var(--text-primary); }
[data-theme="light"] .ai-feature-card::before {
  background: linear-gradient(135deg, rgba(229,28,35,0.03), transparent);
}
[data-theme="light"] .global-stat-num { color: var(--text-primary); }
[data-theme="light"] .mockup-content { background: var(--bg-card); }
[data-theme="light"] .mock-bar { background: rgba(229,28,35,0.1); }
[data-theme="light"] .mock-bar.active { background: var(--red); }
[data-theme="light"] .sticky-cta-btn {
  box-shadow: 0 4px 20px rgba(229,28,35,0.25);
}
[data-theme="light"] .cs-hero { background: linear-gradient(135deg, #0a0514 0%, #050a18 50%, #0a0514 100%); }

/* ─── BORDERS LIGHT ──────────────────────────────────────────── */
[data-theme="light"] .modules-section,
[data-theme="light"] .how-it-works,
[data-theme="light"] .testimonials-section,
[data-theme="light"] .global-section {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* ─── SECTION DIVIDERS ───────────────────────────────────────── */
[data-theme="light"] .section-divider {
  background: linear-gradient(90deg, transparent, rgba(229,28,35,0.15), rgba(14,165,233,0.1), transparent);
}