/* ========================================
   CSS Variables - Theme Colors
   ======================================== */

/* Dark Mode (Default) */
:root {
  --bg: #0b141a;
  --ink: #eaf1f3;
  --mut: #b7c7cd;
  --pri: #00b3bd;
  --pri-2: #0097a0;
  --card: #101922;
  --line: #1f2d39;
  --accent: #8de7ee;
  --shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  --header-bg: rgba(9, 16, 22, 0.85);
  --card-bg: linear-gradient(180deg, #0d1922, #0b141b);
  --card-border: #1a2a36;
  --panel-bg: #0e1821;
  --input-bg: #0a141c;
  --step-bg: #0e1a22;
  --area-bg: #0d1a22;
  --footer-bg: #0a1218;
  --drawer-bg: #0c151c;
  --drawer-item: #0e1a22;
  --hero-overlay: linear-gradient(135deg, rgba(0, 20, 30, 0.85) 0%, rgba(0, 40, 50, 0.7) 50%, rgba(0, 60, 70, 0.6) 100%);
  --hero-text: #eaf1f3;
  --hero-subtext: #c8d8dc;
  --pill-bg: rgba(0, 179, 189, 0.15);
  --pill-border: rgba(0, 179, 189, 0.4);
  --pill-text: #8de7ee;
  --badge-bg: rgba(0, 0, 0, 0.3);
  --badge-border: rgba(255, 255, 255, 0.15);
  --badge-text: #e6f6f8;
  --badge-check-bg: rgba(0, 179, 189, 0.3);
  --logo-gradient: radial-gradient(120% 140% at 10% 10%, #0bd1de, #06323a 60%, #03181d 100%);
  --logo-stroke: #8de7ee;
  --faq-bg: #0e1a22;
  --faq-border: #1a2a36;
}

/* Light Mode */
[data-theme="light"] {
  --bg: #f5f7f9;
  --ink: #1a2a30;
  --mut: #5a6a70;
  --pri: #0097a0;
  --pri-2: #007a82;
  --card: #ffffff;
  --line: #e0e5e8;
  --accent: #006b70;
  --shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  --header-bg: rgba(255, 255, 255, 0.9);
  --card-bg: linear-gradient(180deg, #ffffff, #f8fafb);
  --card-border: #e0e5e8;
  --panel-bg: #ffffff;
  --input-bg: #f5f7f9;
  --step-bg: #ffffff;
  --area-bg: #f0f4f6;
  --footer-bg: #e8eef0;
  --drawer-bg: #ffffff;
  --drawer-item: #f5f7f9;
  --hero-overlay: linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(240, 248, 250, 0.88) 50%, rgba(230, 245, 248, 0.85) 100%);
  --hero-text: #1a2a30;
  --hero-subtext: #4a5a60;
  --pill-bg: rgba(0, 151, 160, 0.12);
  --pill-border: rgba(0, 151, 160, 0.3);
  --pill-text: #007a82;
  --badge-bg: rgba(0, 151, 160, 0.1);
  --badge-border: rgba(0, 151, 160, 0.25);
  --badge-text: #006b70;
  --badge-check-bg: rgba(0, 151, 160, 0.2);
  --logo-gradient: radial-gradient(120% 140% at 10% 10%, #00b3bd, #e0f4f5 60%, #f0fafb 100%);
  --logo-stroke: #007a82;
  --faq-bg: #ffffff;
  --faq-border: #e0e5e8;
}