/* ============================================================
   IntelPulse — Shared Theme Stylesheet
   Dark (default) + Light palettes, theme toggle button, transitions.
   Linked by every page:  <link rel="stylesheet" href="/theme.css">
   Toggle logic lives in /theme.js
   ============================================================ */

:root {
  /* ===== DARK THEME (default) ===== */
  --bg: #0D1117;
  --surface: #161C27;
  --card: #1E2840;
  --card2: #151D33;
  --border: #2A3F5F;
  --border2: #2A3F5F;
  --accent: #4FC3F7;
  --red: #ef5350;
  --orange: #ffa726;
  --green: #4caf50;
  --gold: #ffd54f;
  --text: #ffffff;
  --text2: #CBD5E1;
  --muted: #8499ac;
  --white: #ffffff;
  /* theme-aware overlays (dark values) */
  --hero-overlay: radial-gradient(ellipse 75% 65% at 50% 50%, rgba(13,17,23,0.78) 0%, rgba(13,17,23,0.76) 30%, rgba(13,17,23,0.68) 55%, rgba(13,17,23,0.62) 78%, rgba(13,17,23,0.58) 100%);
  --section-overlay: radial-gradient(ellipse 90% 80% at 50% 50%, rgba(13,17,23,0.93) 0%, rgba(13,17,23,0.91) 45%, rgba(13,17,23,0.84) 70%, rgba(13,17,23,0.76) 88%, rgba(13,17,23,0.70) 100%);
  --region-card-bg: #28344e;
  --region-card-border: rgba(79,195,247,0.45);
  --region-card-bg-hover: #303d5c;
  --region-name: #ffffff;
  --region-sub: #CBD5E1;
  --grid-line: 79,195,247;
  /* misc theme-aware (dark values) */
  --nav-bg: rgba(13,17,23,0.95);
  --badge-bg: #000000;
  --badge-border: #ffffff;
  --badge-text: #ff2020;
  --how-step-hover: #1e2840;
  --how-num: #FFB300;
  --how-num-hover: #FFD740;
  --chip-bg: rgba(10,15,20,0.88);
  --chip-bg-strong: rgba(13,17,23,0.95);
  --featured-bg: linear-gradient(135deg,#1A1F2B,#1e2a3a);
  --body-text: #e2e8f0;
  --footer-bottom-text: #94a3b8;
  --ecg-rgb: 79,195,247;
  --ecg-label: #e8f4ff;
  --mono: 'Share Tech Mono', monospace;
  --sans: 'Barlow', sans-serif;
  --cond: 'Barlow Condensed', sans-serif;
}

[data-theme="light"] {
  /* ===== LIGHT THEME ===== */
  --bg: #E8EAED;
  --surface: #F1F2F4;
  --card: #FAFBFC;
  --card2: #EDEFF2;
  --border: rgba(40,48,60,0.14);
  --border2: rgba(40,48,60,0.20);
  --accent: #1d7fb0;
  --red: #d23b35;
  --orange: #d6841a;
  --green: #2f8f4e;
  --gold: #b98a16;
  --text: #1d2129;
  --text2: #5b6470;
  --muted: #7a8694;
  --white: #14181f;
  /* theme-aware overlays (light values) */
  --hero-overlay: radial-gradient(ellipse 75% 65% at 50% 50%, rgba(232,234,237,0.94) 0%, rgba(232,234,237,0.92) 30%, rgba(232,234,237,0.70) 55%, rgba(232,234,237,0.40) 78%, rgba(232,234,237,0.18) 100%);
  --section-overlay: radial-gradient(ellipse 90% 80% at 50% 50%, rgba(232,234,237,0.95) 0%, rgba(232,234,237,0.93) 45%, rgba(232,234,237,0.78) 70%, rgba(232,234,237,0.50) 88%, rgba(232,234,237,0.28) 100%);
  --region-card-bg: #1d2633;
  --region-card-border: rgba(29,127,176,0.25);
  --region-card-bg-hover: #232e3d;
  --region-name: #ffffff;
  --region-sub: #aeb8c4;
  --grid-line: 40,48,60;
  /* misc theme-aware (light values) */
  --nav-bg: rgba(241,242,244,0.92);
  --badge-bg: #1d2129;
  --badge-border: rgba(40,48,60,0.25);
  --badge-text: #ff5247;
  --how-step-hover: #eef0f3;
  --how-num: #c8881a;
  --how-num-hover: #a86f12;
  --chip-bg: rgba(29,33,41,0.88);
  --chip-bg-strong: rgba(29,33,41,0.95);
  --featured-bg: linear-gradient(135deg,#eef4f8,#e3edf3);
  --body-text: #2b313b;
  --footer-bottom-text: #5b6470;
  --ecg-rgb: 29,127,176;
  --ecg-label: #155e85;
}

/* ===== Smooth theme transition (applies site-wide) ===== */
body,
nav, header, section, footer, aside, main,
.card, .feat-card, .intel-card, .case-card, .pricing-card,
.proof-card, .region-card, .how-step, .stat-strip, .stat-item,
.panel, .box, .tile, .modal, .form-card {
  transition: background 0.4s ease, background-color 0.4s ease,
              color 0.4s ease, border-color 0.4s ease;
}

/* ===== Theme toggle button ===== */
.theme-toggle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border2);
  background: transparent;
  color: var(--text2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
  padding: 0;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); transform: rotate(15deg); }
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="light"] .theme-toggle .icon-sun { display: block; }
[data-theme="light"] .theme-toggle .icon-moon { display: none; }