/* styles/theme.css - Theme-Specific Styles (Light/Dark Mode) */
:root {
  --navbar-bg: linear-gradient(135deg, var(--navbar-bg-light), var(--navbar-accent-light));
  --card-shadow: 0 8px 24px var(--shadow-light);
  --backdrop-filter: blur(15px);
}

[data-theme="dark"] {
  --navbar-bg: linear-gradient(135deg, var(--navbar-bg-dark), var(--navbar-accent-dark));
  --card-shadow: 0 8px 24px var(--shadow-dark);
  color-scheme: dark;
}

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

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

[data-theme="dark"] .platform-card {
  background: var(--gray-light);
  box-shadow: var(--card-shadow);
}

[data-theme="dark"] .hero-content h1,
[data-theme="dark"] .platform-card h2 {
  color: var(--white);
}

[data-theme="dark"] .hero-sub,
[data-theme="dark"] .platform-card p {
  color: var(--gray);
}

[data-theme="dark"] .platform-icon {
  background: rgba(255, 255, 255, 0.06);
  color: var(--secondary-light);
}

[data-theme="dark"] .platform-icon i {
  color: var(--secondary-light);
}

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

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

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

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

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

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

h1,
h2,
h3,
p,
a,
.cta-main,
.cta-secondary,
.back-to-top {
  transition: color 0.3s ease;
}