:root {
  --bg: #ffffff;
  --header-bg: rgba(255, 255, 255, 1);
  --menu-bg: rgba(255, 255, 255, 1); 
  --card-bg: #fafafa;
  --card-bg-secondary: #f0f0f0;
  --footer-bg: #eee;
  --nav-hover: #e7e7e7;
  --button: #87CEEB;
  --button-text: #fff;
  --text: #111111;
  --link: #0056b3;
  --border: #d0d0d0;
  --button-border: #222;
  --icon: #222222;
  --accent: #87CEEB;
  --hero-accent: rgba(0,0,0,0.08);
  --hover-bg: #e9ecef;
}

body.dark {
  --bg: #121212;
  --header-bg: rgba(20, 20, 20, 1);
  --menu-bg: rgba(0, 0, 0, 1);
  --card-bg: #1e1e1e;
  --card-bg-secondary: #151515;
  --footer-bg: #1a1a1a;
  --nav-hover: #222222;
  --button: #87CEEB;
  --button-text: #fff;
  --text: #eaeaea;
  --link: #4da3ff;
  --border: #333;
  --button-border: #999;
  --icon: #eaeaea;
  --accent: #87CEEB;
  --hero-accent: rgba(0,0,0,0.3);
  --hover-bg: #15222b;
}