/* Strict Shared Theme System */

/* Dark Theme (Default) */
:root, [data-theme="dark"] {
  --color-canvas: #060609 !important;
  --color-page-bg: #060609 !important;
  --color-paper: rgba(18, 18, 26, 0.75) !important;
  --color-paper-hover: rgba(28, 28, 40, 0.9) !important;
  --color-surface-alt: rgba(12, 12, 18, 0.65) !important;
  --color-ink: #f8fafc !important;
  --color-ink-soft: #f1f5f9 !important;
  --color-mid-gray: #94a3b8 !important;
  --color-muted: #64748b !important;
  --color-hairline: rgba(255, 255, 255, 0.09) !important;
  --color-hairline-hover: rgba(255, 255, 255, 0.22) !important;
  --color-header-bg: rgba(6, 6, 9, 0.8) !important;
  --color-btn-pri-bg: #ffffff !important;
  --color-btn-pri-text: #060609 !important;
  --shadow-card: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 12px 32px -4px rgba(0, 0, 0, 0.6) !important;
}

/* OLED Black Theme */
[data-theme="oled"] {
  --color-canvas: #000000 !important;
  --color-page-bg: #000000 !important;
  --color-paper: #08080a !important;
  --color-paper-hover: #121215 !important;
  --color-surface-alt: #050505 !important;
  --color-ink: #ffffff !important;
  --color-ink-soft: #f8fafc !important;
  --color-mid-gray: #a1a1aa !important;
  --color-muted: #71717a !important;
  --color-hairline: #27272a !important;
  --color-hairline-hover: #3f3f46 !important;
  --color-header-bg: rgba(0, 0, 0, 0.95) !important;
  --color-btn-pri-bg: #ffffff !important;
  --color-btn-pri-text: #000000 !important;
  --shadow-card: 0 0 0 1px #27272a !important;
}

/* Light Theme */
[data-theme="light"] {
  --color-canvas: #f1f4f9 !important;
  --color-page-bg: #f1f4f9 !important;
  --color-paper: rgba(255, 255, 255, 0.82) !important;
  --color-paper-hover: rgba(255, 255, 255, 0.96) !important;
  --color-surface-alt: rgba(235, 240, 248, 0.75) !important;
  --color-ink: #0f172a !important;
  --color-ink-soft: #1e293b !important;
  --color-mid-gray: #64748b !important;
  --color-muted: #94a3b8 !important;
  --color-hairline: rgba(0, 0, 0, 0.08) !important;
  --color-hairline-hover: rgba(0, 0, 0, 0.16) !important;
  --color-header-bg: rgba(241, 244, 249, 0.85) !important;
  --color-btn-pri-bg: #0f172a !important;
  --color-btn-pri-text: #ffffff !important;
  --shadow-card: 0 4px 20px -2px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.06) !important;
}

html, body {
  background-color: var(--color-canvas) !important;
  background: var(--color-canvas) !important;
  color: var(--color-ink) !important;
  transition: background-color 0.25s ease, color 0.25s ease;
}

#root {
  position: relative !important;
  z-index: 2 !important;
  background: transparent !important;
}

#human-particles-canvas {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Semi-transparent cards with crisp blur */
.model-card,
.detail-hero-card,
.docs-sidebar,
.quickstart-params-grid,
.base-url-pill {
  background: var(--color-paper) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid var(--color-hairline) !important;
  color: var(--color-ink) !important;
}

.site-header {
  background: var(--color-header-bg) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid var(--color-hairline) !important;
}

/* Theme Switcher Active State Contrast */
button[style*="background: var(--color-ink)"],
button[style*="background: rgb(250, 250, 250)"],
button[style*="background: #fafafa"],
button[style*="background: #ffffff"],
button[style*="background: rgb(15, 23, 42)"],
button[style*="background: #0f172a"] {
  color: var(--color-btn-pri-text) !important;
  background: var(--color-btn-pri-bg) !important;
}

button[style*="background: var(--color-surface-alt)"] {
  color: var(--color-ink) !important;
}