/* ─── Theme CSS Variable Bridge ───
   styles.css (v2) uses: --bg, --bg-card, --text, --text-secondary, etc.
   cardforge.css (v1) uses: --bg-dark, --bg-card, --text, --text-muted, etc.
   This file bridges both naming conventions so ALL theme variables
   are available regardless of which base CSS is loaded. */

[data-theme="dark"] {
  --bg: #0f172a;
  --bg-alt: #0c1424;
  --bg-card: #1e293b;
  --bg-card-hover: #243244;
  --text: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --line: #334155;
  --line-strong: #475569;
  --shadow: 0 4px 24px rgba(0,0,0,0.3);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.4);
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --gradient-primary: linear-gradient(135deg, #3b82f6, #1a56db);
  --primary: #3b82f6;
  --primary-light: #60a5fa;
  --primary-dark: #1a56db;
}

[data-theme="light"] {
  --bg: #f8fafc;
  --bg-alt: #f1f5f9;
  --bg-card: #ffffff;
  --bg-card-hover: #f8fafc;
  --text: #1e293b;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --line: #e2e8f0;
  --line-strong: #cbd5e1;
  --shadow: 0 4px 20px rgba(15,23,42,0.08);
  --shadow-lg: 0 8px 40px rgba(15,23,42,0.12);
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --gradient-primary: linear-gradient(135deg, #3b82f6, #1a56db);
  --primary: #3b82f6;
  --primary-light: #60a5fa;
  --primary-dark: #1a56db;
}

/* ─── Dark Theme Selector Overrides ───
   Fixes selectors in styles.css that use hardcoded light values */

[data-theme="dark"] .section.alt {
  background: #1e293b;
}

[data-theme="dark"] .hero-section {
  background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
}

[data-theme="dark"] .comparison-table th {
  background: #1e293b;
  color: #f1f5f9;
}

[data-theme="dark"] .comparison-table th,
[data-theme="dark"] .comparison-table td {
  border-bottom-color: #334155;
}

[data-theme="dark"] .comparison-table tr:nth-child(even) td {
  background: rgba(30, 41, 59, 0.3);
}

[data-theme="dark"] .form-group input,
[data-theme="dark"] .form-group textarea,
[data-theme="dark"] .form-group select {
  background: #1e293b;
  color: #f1f5f9;
  border-color: #334155;
}

[data-theme="dark"] .form-group input::placeholder,
[data-theme="dark"] .form-group textarea::placeholder {
  color: #64748b;
}

[data-theme="dark"] .main-nav a {
  color: #94a3b8;
}

[data-theme="dark"] .main-nav a:hover,
[data-theme="dark"] .main-nav a.active {
  color: #3b82f6;
}

[data-theme="dark"] .section-head p {
  color: #94a3b8;
}

[data-theme="dark"] p,
[data-theme="dark"] li {
  color: #94a3b8;
}

[data-theme="dark"] .button.outline {
  border-color: #3b82f6;
  color: #3b82f6;
}

[data-theme="dark"] .catalog-body h3,
[data-theme="dark"] .team-card h4,
[data-theme="dark"] .contact-method h4 {
  color: #f1f5f9;
}

/* ─── Responsive fixes ─── */

@media (max-width: 640px) {
  .hero-section {
    padding: 40px 16px 32px;
  }

  .hero-section h1 {
    font-size: 24px;
  }

  .catalog-card img {
    height: 160px;
  }

  .cta-section {
    padding: 48px 16px;
  }

  .section {
    padding: 48px 0;
  }
}