body.dark-mode {
  --background: #202124;
  --surface: #303134;
  --text-primary: #e8eaed;
  --text-secondary: #969ba1;
  --google-blue: #8ab4f8;
  --google-blue-hover: #aecbfa;
  --border-color: #3c4043;
  --search-bg: #303134;
  --search-hover-bg: #3c4043;
  --url-color: #7d8fd0;
}

body.dark-mode .material-icons {
  color: var(--text-primary);
}

body.dark-mode .icon-button {
  color: var(--text-primary);
}

body.dark-mode .icon-button:hover {
  background-color: rgba(232, 234, 237, 0.08);
}


/* Dark mode styles */
:root {
  /* Light theme variables */
  --background: #fff;
  --surface: #fff;
  --text-primary: #202124;
  --text-secondary: #5f6368;
  --search-bg: #fff;
  --search-border: #dfe1e5;
  --search-hover-border: #e8e8e9;
  --search-hover-shadow: rgba(32,33,36,.28);
  --button-bg: #f8f9fa;
  --button-text: #3c4043;
  --button-hover-border: #dadce0;
  --footer-bg: #f2f2f2;
  --footer-border: #dadce0;
  --footer-text: #70757a;
  --url-color: #006621;
  --border-color: #dfe1e5;
  /* Add these variables */
  --search-hover-bg: #f8f9fa;
  --search-focus-bg: #ffffff;
}

/* Dark theme variables */
[data-theme="dark"] {
  --background: #202124;
  --surface: #303134;
  --text-primary: #e8eaed;
  --text-secondary: #969ba1;
  --search-bg: #303134;
  --search-border: #5f6368;
  --search-hover-border: #8ab4f8;
  --search-hover-shadow: rgba(32,33,36,.28);
  --button-bg: #303134;
  --button-text: #e8eaed;
  --button-hover-border: #5f6368;
  --footer-bg: #171717;
  --footer-border: #3c4043;
  --footer-text: #999da2;
  --url-color: #8ab4f8;
  --border-color: #3c4043;
  /* Add these variables */
  --search-hover-bg: #424347;
  --search-focus-bg: #202124;
}

/* Apply theme colors */
body {
  background-color: var(--background);
  color: var(--text-primary);
}

a {
    color: var(--url-color);
}

#search-bar {
  background-color: var(--search-bg);
  border-color: var(--search-border);
}
#search-bar:hover,
#search-bar:focus-within {
  background-color: var(--search-bg);
  border-color: var(--search-hover-border);
  box-shadow: 0 1px 6px var(--search-hover-shadow);
}
[data-theme="dark"] .search-bar-small:hover,
[data-theme="dark"] .search-bar-small:focus-within {
  background-color: #424347;
  box-shadow: 0 1px 6px rgba(32,33,36,.28);
  border-color: rgba(223,225,229,0);
}

#search-input {
  color: var(--text-primary);
  background: transparent;
}

#search-input::placeholder {
  color: var(--text-secondary);
}

.icon-button {
  color: var(--text-primary);
}

.icon-button:hover {
  background-color: var(--surface);
}

#search-buttons button {
  background-color: var(--button-bg);
  color: var(--button-text);
  border-color: var(--button-bg);
}

#search-buttons button:hover {
  border-color: var(--button-hover-border);
  box-shadow: 0 1px 1px rgba(0,0,0,.1);
}

footer {
  background-color: var(--footer-bg);
  border-top: 1px solid var(--footer-border);
}

.footer-section {
  border-bottom-color: var(--footer-border);
}

.footer-section a {
  color: var(--footer-text);
}

.result-item {
    border-bottom-color: var(--border-color);
}

/* Dark mode specific adjustments */
[data-theme="dark"] .material-icons {
  opacity: 0.87;
}

[data-theme="dark"] #search-bar {
  box-shadow: 0 1px 2px rgba(0,0,0,.3);
}

[data-theme="dark"] #search-buttons button:hover {
  background-color: #3c4043;
}