/* === Variables === */
/* Dark theme (default) and Light theme CSS custom properties */

:root {
  --blue-matrix: #2E86AB;
  --blue-azure: #007ACC;
  --blue-azure-hover: #0066A6;
  --blue-light: #3AAFFF;
  --blue-glow: #00B4FF;
  --card-dark: #080c16;
  --bg-dark: #040810;
  --bg-section: #0a0f1c;
  --text-primary: #E8EDF5;
  --text-secondary: #8B97B0;
  --text-muted: #5A6680;
  --border-subtle: rgba(46, 134, 171, 0.15);
  --gradient-main: linear-gradient(135deg, #2E86AB 0%, #007ACC 50%, #00B4FF 100%);
  --gradient-glow: radial-gradient(ellipse at center, rgba(0, 122, 204, 0.15) 0%, transparent 70%);
  --nav-bg: rgba(4, 8, 16, 0.85);
  --shadow-card: rgba(0, 0, 0, 0.3);
  --shadow-hover: rgba(0, 0, 0, 0.4);
  --glow-orb-1: rgba(0, 122, 204, 0.5);
  --glow-orb-2: rgba(46, 134, 171, 0.3);
  --grid-line: rgba(46, 134, 171, 0.05);
  --cta-bg: linear-gradient(135deg, rgba(46, 134, 171, 0.1) 0%, rgba(0, 122, 204, 0.08) 100%);
  --cta-border: rgba(46, 134, 171, 0.2);
  --faq-bg: var(--bg-section);
  --result-card-bg: var(--card-dark);
  --product-card-bg: var(--card-dark);
  --problem-card-bg: var(--bg-section);
  --integration-bg: var(--bg-section);
  --meta-badge-bg: rgba(46, 134, 171, 0.06);
  --footer-border: var(--border-subtle);
}

/* ========== LIGHT THEME ========== */
[data-theme="light"] {
  --card-dark: #FFFFFF;
  --bg-dark: #F5F7FB;
  --bg-section: #FFFFFF;
  --text-primary: #0F172A;
  --text-secondary: #475569;
  --text-muted: #94A3B8;
  --border-subtle: rgba(46, 134, 171, 0.18);
  --blue-light: #0068B5;
  --blue-glow: #007ACC;
  --gradient-glow: radial-gradient(ellipse at center, rgba(0, 122, 204, 0.06) 0%, transparent 70%);
  --nav-bg: rgba(245, 247, 251, 0.9);
  --shadow-card: rgba(46, 134, 171, 0.08);
  --shadow-hover: rgba(46, 134, 171, 0.15);
  --glow-orb-1: rgba(0, 122, 204, 0.08);
  --glow-orb-2: rgba(46, 134, 171, 0.06);
  --grid-line: rgba(46, 134, 171, 0.06);
  --cta-bg: linear-gradient(135deg, rgba(46, 134, 171, 0.06) 0%, rgba(0, 122, 204, 0.04) 100%);
  --cta-border: rgba(46, 134, 171, 0.15);
  --faq-bg: #FFFFFF;
  --result-card-bg: #FFFFFF;
  --product-card-bg: #FFFFFF;
  --problem-card-bg: #FFFFFF;
  --integration-bg: #FFFFFF;
  --meta-badge-bg: rgba(46, 134, 171, 0.06);
  --footer-border: rgba(46, 134, 171, 0.12);
}

/* Light theme overrides */
[data-theme="light"] .gradient-text {
  background: linear-gradient(135deg, #005F8C 0%, #007ACC 50%, #2E86AB 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

[data-theme="light"] .btn-primary {
  box-shadow: 0 4px 16px rgba(0, 122, 204, 0.25);
}

[data-theme="light"] .btn-outline {
  color: var(--blue-azure);
  border-color: rgba(0, 122, 204, 0.25);
}

[data-theme="light"] .btn-outline:hover {
  background: rgba(0, 122, 204, 0.06);
  border-color: var(--blue-azure);
}

[data-theme="light"] .hero-badge {
  background: rgba(46, 134, 171, 0.08);
  color: var(--blue-azure);
}

[data-theme="light"] .hero-stats .stat-number {
  color: var(--blue-azure);
}

[data-theme="light"] .section-label {
  color: var(--blue-azure);
}

[data-theme="light"] .section-label::before {
  background: var(--blue-azure);
}

[data-theme="light"] .problem-card .solution-tag {
  background: rgba(0, 122, 204, 0.08);
  color: var(--blue-azure);
}

[data-theme="light"] .product-tag {
  color: var(--blue-azure);
}

[data-theme="light"] .product-features li .check {
  color: var(--blue-azure);
}

[data-theme="light"] .product-link {
  color: var(--blue-azure);
}

[data-theme="light"] .integration-logo {
  background: rgba(0, 122, 204, 0.06);
  color: var(--blue-azure);
}

[data-theme="light"] .meta-badge strong {
  color: var(--blue-azure);
}

[data-theme="light"] .step-number {
  background: #fff;
  border-color: var(--blue-azure);
  color: var(--blue-azure);
}

[data-theme="light"] .timeline-step:hover .step-number {
  background: var(--blue-azure);
  color: #fff;
}

[data-theme="light"] .faq-question:hover {
  color: var(--blue-azure);
}

[data-theme="light"] .faq-toggle {
  color: var(--blue-azure);
}

[data-theme="light"] .nav-logo span:first-child { color: var(--blue-azure); }
[data-theme="light"] .nav-logo span:last-child { color: var(--blue-matrix); }

[data-theme="light"] .result-number {
  background: linear-gradient(135deg, #005F8C 0%, #007ACC 50%, #2E86AB 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* WOW: Smoother theme transitions on key elements */
nav,
.product-card,
.problem-card,
.result-card,
.faq-item,
.cta-box,
footer,
.hero-badge,
.meta-badge,
.client-item,
.step-number,
.mascot-bubble,
.widget-tooltip {
  transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}