:root {
  --bg: #ffffff;
  --header-bg: rgba(250, 250, 250, 0.8);
  --menu-bg: rgba(255, 255, 255, 0.8);
  --theme-menu-bg: rgba(255, 255, 255, 0.8);
  --footer-bg: #f8f8f8;
  --card-bg: #fafafa;
  --card-bg-hover: #eee;
  --logo-bg: #f0f0f0;
  --logo-border: #ddd;
  --button: #000;
  --button-text: #fff;
  --btn-secondary-bg: #e7e7e7;
  --btn-secondary-text: #000;
  --nav-a: #505050;
  --nav-a-active-bg: #eee;
  --nav-a-bg: #f3f3f3;
  --menu-nav-a-active-bg: #e7e7e7;
  --menu-nav-a-bg: #eee;
  --text: #111111;
  --link: #0056b3;
  --border: #e0e0e0;
  --accent: #87CEEB;
  --hero-accent: rgba(0,0,0,0.08);
  --discontinued-color: #dc3545;
  --inactive-color: #c8a200;
  --active-color: #00c853;
  --meta-text: rgba(17, 17, 17, 0.6);
  --social-button-bg: #eee;
  --social-button-bg-hover: #ddd;
  --social-icon-fill: #101010;
  --social-button-border: #ddd;
  --modal-bg: #fff;
  --modal-text: #000;
  --overlay-bg: rgba(200, 200, 200, 0.8);
  --search-overlay-bg: rgba(200, 200, 200, 0.8);
  --search-input-bg: rgba(255, 255, 255, 0.3);
  --z-index-header: 900;
  --z-index-theme-menu: 905;
  --z-index-search: 1000;
  --z-index-modal: 990;
}

body.dark {
  --bg: #121212;
  --header-bg: rgba(21, 21, 21, 0.8);
  --menu-bg: rgba(0, 0, 0, 0.8);
  --theme-menu-bg: rgba(0, 0, 0, 0.8);
  --footer-bg: #1e1e1e;
  --card-bg: #1e1e1e;
  --card-bg-hover: #2a2a2a;
  --logo-bg: #222;
  --logo-border: #333;
  --button: #fff;
  --button-text: #000;
  --btn-secondary-bg: #333;
  --btn-secondary-text: #fff;
  --nav-a: #aaa;
  --nav-a-active-bg: #333;
  --nav-a-bg: #202020;
  --menu-nav-a-active-bg: #222;
  --menu-nav-a-bg: #202020;
  --text: #eaeaea;
  --link: #4da3ff;
  --border: #333;
  --accent: #87CEEB;
  --hero-accent: rgba(0,0,0,0.3);
  --discontinued-color: #ff6b81;
  --inactive-color: #ffea00;
  --active-color: #00c853;
  --meta-text: rgba(234, 234, 234, 0.5);
  --social-button-bg: #222;
  --social-button-bg-hover: #333;
  --social-icon-fill: var(--text);
  --social-button-border: #505050;
  --modal-bg: #111;
  --modal-text: #fff;
  --overlay-bg: rgba(0, 0, 0, 0.8);
  --search-overlay-bg: rgba(0, 0, 0, 0.8);
  --search-input-bg: rgba(20, 20, 20, 0.3);
}

body.amoled-dark {
  --bg: #000;
  --header-bg: rgba(0, 0, 0, 1);
  --menu-bg: rgba(0, 0, 0, 1);
  --theme-menu-bg: rgba(0, 0, 0, 1);
  --footer-bg: #101010;
  --card-bg: #171717;
  --card-bg-hover: #202020;
  --logo-bg: #222;
  --logo-border: #333;
  --button: #fff;
  --button-text: #000;
  --btn-secondary-bg: #333;
  --btn-secondary-text: #fff;
  --nav-a: #aaa;
  --nav-a-active-bg: #202020;
  --nav-a-bg: #171717;
  --menu-nav-a-active-bg: #222;
  --menu-nav-a-bg: #171717;
  --text: #eaeaea;
  --link: #4da3ff;
  --border: #222;
  --accent: #87CEEB;
  --hero-accent: rgba(0, 0, 0, 0.3);
  --discontinued-color: #ff6b81;
  --inactive-color: #ffea00;
  --active-color: #00c853;
  --meta-text: rgba(234, 234, 234, 0.5);
  --social-button-bg: #202020;
  --social-button-bg-hover: #303030;
  --social-icon-fill: var(--text);
  --social-button-border: #333;
  --modal-bg: #101010;
  --modal-text: #fff;
  --overlay-bg: rgba(0, 0, 0, 1);
  --search-overlay-bg: rgba(0, 0, 0, 1);
  --search-input-bg: rgba(10, 10, 10, 0.5);
}