html[data-devinside-base] {
  --base: attr(data-devinside-base type(<color>));
}

html[data-devinside-accent] {
  --accent: attr(data-devinside-accent type(<color>));
}

html[data-devinside-radius] {
  --radius: attr(data-devinside-radius type(<length>));
}

@-moz-document url-prefix() {
  html[data-devinside-base] {
    --base: #326a98;
  }

  html[data-devinside-accent] {
    --accent: #2d4a8d
  }

  html[data-devinside-radius] {
    --radius: 0.5em
  }
}


:root {
  color-scheme: light dark;

  /* ---------- Base ---------- */
  --radius: .5em;
  --radius-xl: calc(var(--radius) * 2);
  --transition-fast: 150ms ease;

  --white: #fff;
  --overlay-alpha-light: 0.4;
  --overlay-alpha-dark: 0.6;

  /* ---------- Neutral Backgrounds ---------- */
  --light: color-mix(in srgb, var(--base) 20%, white 80%);
  --dark: color-mix(in srgb, var(--base) 10%, #000 90%);

  /* Accent slightly adjusted towards --base for softer appearance in dark mode */
  --accent-dark: color-mix(in srgb, var(--accent) 75%, black 25%);

  --bg-light: color-mix(in srgb, var(--base) 12%, white 88%);
  --bg-light-dark: color-mix(in srgb, var(--base) 35%, black 65%);
  --bg-hover: var(--bg-light);

  --danger: #ea4335;
  --warning: #c17d00;
  --success: #34a853;
  --brand-yellow: #fbbc05;

  /* ---------- Light Theme (Default) ---------- */
  --theme-bg: var(--light);
  --theme-accent: var(--accent-dark);
  --overlay-bg: rgb(0 0 0 / var(--overlay-alpha-light));

  --text-primary: color-mix(in srgb, var(--base) 88%, black 12%);
  --text-cite: color-mix(in srgb, var(--text-primary) 85%, var(--base) 15%);

  --border: color-mix(in srgb, var(--theme-bg) 78%, var(--base) 22%);
  --border-light: color-mix(in srgb, var(--theme-bg) 90%, var(--base) 10%);

  --text-secondary: color-mix(in srgb, var(--text-primary) 70%, var(--theme-bg) 30%);
  --text-snippet: color-mix(in srgb, var(--text-primary) 82%, var(--theme-bg) 18%);

  --surface: color-mix(in srgb, var(--theme-bg) 96%, var(--base) 4%);
  --surface-2: color-mix(in srgb, var(--theme-bg) 92%, var(--base) 8%);
  --accent-contrast: color-mix(in srgb, var(--theme-bg) 90%, white 10%);

  --bg: var(--theme-bg);
  --primary: var(--theme-accent);
  --brand-blue: var(--theme-accent);
  --shadow-glow: 0 0 10px 3px color-mix(in srgb, var(--theme-accent) 35%, transparent);

  --text-link: var(--theme-accent);
  --text-link-visited: color-mix(in srgb, var(--theme-accent) 60%, rebeccapurple 40%);

  --btn-bg: var(--surface);
  --btn-text: var(--text-primary);
  --btn-bg-hover: color-mix(in srgb, var(--btn-bg) 80%, var(--theme-accent) 20%);
  --search-bar-bg: var(--surface);
  --search-bar-bg-hover: var(--surface);

  /* ---------- Dark Mode Values ---------- */
  --dark-theme-bg: var(--dark);
  --dark-theme-accent: var(--accent);
  --dark-overlay-bg: rgb(0 0 0 / var(--overlay-alpha-dark));
  --dark-bg-light: var(--bg-light-dark);
  --dark-bg-hover: var(--bg-light-dark);

  --dark-text-primary: color-mix(in srgb, var(--dark-theme-bg) 12%, white 88%);
  --dark-text-cite: color-mix(in srgb, var(--dark-text-primary) 85%, white 15%);
  --dark-border: color-mix(in srgb, var(--dark-theme-bg) 68%, white 32%);
  --dark-border-light: color-mix(in srgb, var(--dark-theme-bg) 82%, white 18%);

  --dark-surface: color-mix(in srgb, var(--dark-theme-bg) 88%, white 12%);
  --dark-surface-2: color-mix(in srgb, var(--dark-theme-bg) 82%, white 18%);
}

/* ---------- Dark Theme: Exexute ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --theme-bg: var(--dark-theme-bg);
    --theme-accent: var(--dark-theme-accent);
    --overlay-bg: var(--dark-overlay-bg);
    --bg-light: var(--dark-bg-light);
    --bg-hover: var(--dark-bg-hover);

    --text-primary: var(--dark-text-primary);
    --text-cite: var(--dark-text-cite);
    --border: var(--dark-border);
    --border-light: var(--dark-border-light);

    --surface: var(--dark-surface);
    --surface-2: var(--dark-surface-2);
  }
}

:root[data-theme="dark"] {
  --theme-bg: var(--dark-theme-bg);
  --theme-accent: var(--dark-theme-accent);
  --overlay-bg: var(--dark-overlay-bg);
  --bg-light: var(--dark-bg-light);
  --bg-hover: var(--dark-bg-hover);

  --text-primary: var(--dark-text-primary);
  --text-cite: var(--dark-text-cite);
  --border: var(--dark-border);
  --border-light: var(--dark-border-light);

  --surface: var(--dark-surface);
  --surface-2: var(--dark-surface-2);
}

/* ==================================================
   Layout
   ================================================== */

#at-a-glance,
#results-sidebar {
  font-size: 0.75rem;
}

.glance-snippet,
.related-search-link {
  font-size: 0.8rem;
}

.related-search-link {
  padding: 0.35rem 0;
}

/* --- Engine / Tab Accents --- */
.degoog-badge--engine-tag,
.result-engine-tag:not([class~="degoog-badge"]) {
  color: var(--theme-accent);
}

.degoog-tab.active,
.active.results-tab:not([class~="degoog-tab"]),
.active.tools-toggle:not([class~="degoog-tab"]) {
  color: var(--theme-accent);
  border-bottom-color: var(--theme-accent);
}

.wiki-card {
  border-radius: 0 !important;
}

/* --- Sidebar --- */
.wiki-title {
  font-size: 120% !important;
  color: var(--theme-accent) !important;
}

.wiki-desc {
  letter-spacing: 0 !important;
  font-weight: 300 !important;
  color: var(--text-cite) !important;
  text-transform: none !important;
  margin: 0.25rem 0 0.75rem !important;
}

/* --- Favicon --- */
.degoog-result--favicon {
  outline: 1px solid var(--bg);
  background: var(--white);
}

/* --- Search Bar --- */
.search-bar,
.results-search-bar {
  background: var(--search-bar-bg);
  border: 2px solid transparent;
  border-radius: var(--radius-xl);
  box-shadow: none;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.search-bar:focus-within,
.results-search-bar:focus-within {
  border-color: var(--primary);
  box-shadow: var(--shadow-glow);
}

.search-bar.ac-open,
.results-search-bar.ac-open {
  border-color: var(--primary);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow: none;
}

.search-bar.ac-open .ac-dropdown,
.results-search-bar.ac-open .ac-dropdown {
  left: -0.1rem;
  right: -2px;
  border: 2px solid var(--primary);
  border-top: none;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  box-shadow: none;
}

/* --- Buttons --- */
.search-btn {
  background-color: var(--theme-accent);
  color: white;
  border-radius: var(--radius);
}

/* --- Panel --- */
.degoog-panel {
  border-radius: calc(var(--radius) * .75);
}

/* --- Data-Attributes --- */
html[data-devinside-smooth="true"] {
  scroll-behavior: smooth;
}

html[data-devinside-logo="accent"] {
  .logo-letter {
    color: var(--theme-accent);
  }
}

html[data-devinside-logo="monochrome"] {
  .logo-letter {
    color: var(--text-primary);
  }
}