:root {
  /* Dark Theme (Default) - Matching WebUI */
  --color-bg: #0a0c10;
  --color-panel: #161b22;
  --color-border: #30363d;
  --color-accent: #58a6ff;
  --color-accent-hover: #79b8ff;
  --color-text: #c9d1d9;
  --color-dim: #8b949e;
  --color-hover: rgba(255, 255, 255, 0.05);
  --color-success: #3fb950;
  --color-warning: #d29922;
  --color-error: #f85149;
  --scroll-thumb: #30363d;
  --scroll-thumb-hover: #58a6ff;
}

:root[data-theme="light"] {
  /* Light Theme - Matching WebUI */
  --color-bg: #ffffff;
  --color-panel: #f6f8fa;
  --color-border: #d0d7de;
  --color-accent: #0969da;
  --color-accent-hover: #0550ae;
  --color-text: #24292f;
  --color-dim: #57606a;
  --color-hover: rgba(0, 0, 0, 0.05);
  --color-success: #1a7f37;
  --color-warning: #9a6700;
  --color-error: #cf222e;
  --scroll-thumb: #d0d7de;
  --scroll-thumb-hover: #0969da;
}

/* Base */
html, body {
  background-color: var(--color-bg);
  color: var(--color-text);
  transition: background-color 0.3s, color 0.3s;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
  letter-spacing: 0.02em;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scroll-thumb-hover);
}

/* Tailwind overrides for WebUI theme */
.bg-black { background-color: var(--color-panel) !important; }
.bg-gray-900 { background-color: var(--color-panel) !important; }
.bg-gray-950 { background-color: var(--color-bg) !important; }
.bg-gray-800 { background-color: var(--color-bg) !important; }

/* Borders */
.border-lime-500, .border-lime-600, .border-lime-700 { border-color: var(--color-border) !important; }
.border { border-color: var(--color-border) !important; }

/* Primary accent colors (was lime, now blue) */
.text-lime-400, .text-lime-500 { color: var(--color-accent) !important; }
.text-lime-300 { color: var(--color-text) !important; }
.text-lime-200 { color: var(--color-accent-hover) !important; }
.text-lime-600 { color: var(--color-dim) !important; }
.text-gray-400, .text-gray-500 { color: var(--color-dim) !important; }

/* Links and buttons */
.hover\:border-lime-500:hover { border-color: var(--color-accent) !important; }
.hover\:text-lime-200:hover, .hover\:text-lime-300:hover { color: var(--color-accent-hover) !important; }
.bg-lime-900 { background-color: transparent !important; border: 1px solid var(--color-border) !important; }
.hover\:bg-lime-900:hover { background-color: var(--color-hover) !important; }
.bg-lime-600 { background-color: var(--color-accent) !important; }
.hover\:bg-lime-500:hover { background-color: var(--color-accent-hover) !important; }

/* Inputs */
input, textarea, select {
  background-color: var(--color-bg) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}

input:focus, textarea:focus, select:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-accent);
}

/* Code blocks */
code {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  background-color: rgba(110, 118, 129, 0.4);
  color: var(--color-accent);
  padding: 0.2em 0.4em;
  border-radius: 6px;
  font-size: 85%;
}

pre {
  background-color: var(--color-bg) !important;
  border: 1px solid var(--color-border);
  border-radius: 8px;
}

pre code {
  background-color: transparent;
  padding: 1em;
  display: block;
  overflow-x: auto;
}

/* Accents */
hr, .divide-y > :not([hidden]) ~ :not([hidden]) { border-color: var(--color-border) !important; }

/* Feature cards hover effect */
.hover\:bg-gray-800:hover {
  background-color: var(--color-hover) !important;
  border-color: var(--color-accent) !important;
}

/* Button styling */
.font-bold {
  font-weight: 600;
}

/* Theme toggle button */
#theme-toggle {
  border-color: var(--color-border);
  color: var(--color-accent);
}

#theme-toggle:hover {
  background-color: var(--color-hover);
}

/* Selection */
::selection {
  background-color: rgba(88, 166, 255, 0.3);
  color: var(--color-text);
}