/* ═══════════════════════════════════════════════════════
   THEME SYSTEM — Light (default) / Dark (toggle)
   ═══════════════════════════════════════════════════════ */

/* ─── Light Mode (Default) ─── */
:root {
  --navy: #F8FAFC;
  --navy-deep: #F1F5F9;
  --surface: #FFFFFF;
  --card: #FFFFFF;
  --card-hover: #F8FAFC;
  --border: #E2E8F0;
  --border-light: #CBD5E1;
  --accent: #EA580C;
  --accent-hover: #F97316;
  --accent-dim: rgba(234,88,12,0.08);
  --accent-glow: rgba(234,88,12,0.12);
  --teal: #0D9488;
  --teal-dim: rgba(13,148,136,0.08);
  --white: #0F172A;
  --text: #334155;
  --text-dim: #64748B;
  --text-muted: #94A3B8;
  --text-dark: #CBD5E1;
  --red: #DC2626;
  --nav-bg: rgba(255, 255, 255, 0.88);
  --nav-border: rgba(226, 232, 240, 0.8);
  --mobile-bg: rgba(255, 255, 255, 0.97);
  --shadow-card: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-card-hover: 0 4px 12px rgba(0,0,0,0.08);
  color-scheme: light;
}

/* ─── Dark Mode ─── */
[data-theme="dark"] {
  --navy: #0A1628;
  --navy-deep: #060F1C;
  --surface: #0F1D2F;
  --card: #111E30;
  --card-hover: #162640;
  --border: #1A2D45;
  --border-light: #1E3250;
  --accent: #F97316;
  --accent-hover: #FB923C;
  --accent-dim: rgba(249,115,22,0.10);
  --accent-glow: rgba(249,115,22,0.15);
  --teal: #14B8A6;
  --teal-dim: rgba(20,184,166,0.10);
  --white: #F8FAFC;
  --text: #E2E8F0;
  --text-dim: #94A3B8;
  --text-muted: #64748B;
  --text-dark: #475569;
  --red: #EF4444;
  --nav-bg: rgba(10, 22, 40, 0.85);
  --nav-border: rgba(30, 50, 80, 0.5);
  --mobile-bg: rgba(6, 15, 28, 0.97);
  --shadow-card: none;
  --shadow-card-hover: none;
  color-scheme: dark;
}

/* ─── Nav uses theme variables ─── */
.nav {
  background: var(--nav-bg) !important;
  border-bottom-color: var(--nav-border) !important;
}
.mobile-menu {
  background: var(--mobile-bg) !important;
}

/* ─── Light mode card shadows ─── */
:root:not([data-theme="dark"]) .card,
:root:not([data-theme="dark"]) .product-card,
:root:not([data-theme="dark"]) .app-card,
:root:not([data-theme="dark"]) .contact-card,
:root:not([data-theme="dark"]) .team-card,
:root:not([data-theme="dark"]) .milestone-card,
:root:not([data-theme="dark"]) .training-item,
:root:not([data-theme="dark"]) .preview-card,
:root:not([data-theme="dark"]) .feature-card {
  box-shadow: var(--shadow-card);
  border-color: var(--border);
}
:root:not([data-theme="dark"]) .card:hover,
:root:not([data-theme="dark"]) .product-card:hover,
:root:not([data-theme="dark"]) .feature-card:hover {
  box-shadow: var(--shadow-card-hover);
}

/* ─── Theme Toggle Button ─── */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  color: var(--text-dim);
  transition: all 0.25s ease;
  flex-shrink: 0;
  margin-left: 0.75rem;
}
.theme-toggle:hover {
  color: var(--white);
  border-color: var(--text-dim);
  background: var(--accent-dim);
}

/* Sun icon (shown in dark mode) */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* ─── Smooth transition on theme change ─── */
body,
.nav,
.mobile-menu,
.card,
.product-card,
.app-card,
.feature-card,
.training-item,
.footer {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* ─── Light mode logo swap ─── */
img.hero-logo.hero-logo-light { display: block; }
img.hero-logo.hero-logo-dark { display: none; }
[data-theme="dark"] img.hero-logo.hero-logo-light { display: none; }
[data-theme="dark"] img.hero-logo.hero-logo-dark { display: block; }

/* ─── Light mode: keep accent SVG strokes visible ─── */
:root:not([data-theme="dark"]) .nav-logo svg path { stroke: #EA580C; }
:root:not([data-theme="dark"]) .nav-logo svg circle { fill: #EA580C; }
:root:not([data-theme="dark"]) .footer-logo svg path { stroke: #EA580C; }
:root:not([data-theme="dark"]) .footer-logo svg circle { fill: #EA580C; }