/* styles/theme.css - Theme-Specific Styles (Light/Dark Mode) */

/* ── Base (light mode) ─────────────────────────────────────────── */
:root {
  --card-shadow:      0 8px 24px var(--shadow-light);
  --backdrop-filter:  blur(15px);
}

/* NOTE: --navbar-bg gradient var removed — overridden by inline
   critical CSS in every HTML page. Navbar background is controlled
   directly there as background: #48a132 / #0d2b08.              */

.navbar {
  backdrop-filter: var(--backdrop-filter);
  -webkit-backdrop-filter: var(--backdrop-filter);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.platform-card {
  background: var(--card-bg-light);
  box-shadow: var(--card-shadow);
}

.footer {
  background: var(--footer-bg);
  box-shadow: none;
}

/* ── Dark mode — flat selectors (no CSS nesting) ───────────────── */
[data-theme="dark"] {
  --card-shadow: 0 8px 24px var(--shadow-dark);
}

[data-theme="dark"] body {
  background: var(--bg-dark);
}

[data-theme="dark"] .hero {
  background: var(--bg-dark);
}

[data-theme="dark"] .platform-grid {
  background: var(--bg-dark);
}

[data-theme="dark"] .platform-card {
  background: var(--card-bg-light);  /* --card-bg-light = #2d3748 in dark mode */
}

[data-theme="dark"] .footer {
  background: var(--footer-bg);      /* --footer-bg = #0d2b08 in dark mode */
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3 {
  color: var(--white);
}

[data-theme="dark"] p {
  color: var(--gray);
}

[data-theme="dark"] a {
  color: var(--primary);
}

[data-theme="dark"] a:hover {
  color: var(--secondary-light);
}

[data-theme="dark"] .cta-main {
  color: var(--black);
}

[data-theme="dark"] .cta-main:hover {
  color: var(--white);
}

[data-theme="dark"] .cta-secondary {
  color: var(--secondary);
}

[data-theme="dark"] .cta-secondary:hover {
  color: var(--white);
}

[data-theme="dark"] .back-to-top {
  color: var(--black);
}

[data-theme="dark"] .back-to-top:hover {
  color: var(--white);
}

/* ── Transitions (both modes) ──────────────────────────────────── */
h1, h2, h3, p, a,
.cta-main, .cta-secondary, .back-to-top {
  transition: color 0.3s ease;
}