:root,
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0E0F11;
  --surface: #141518;            /* tarjetas */
  --surface-sidebar: #121316;
  --surface-topbar: #0E0F11;
  --surface-subtle: #121316;     /* pie de tarjeta, fondos secundarios */
  --surface-input: #16181B;      /* buscador, selector de contexto */
  --surface-hover: #1B1D21;
  --nav-active-bg: #1D2024;
  --border: #22252A;
  --border-control: #26292E;     /* botones secundarios, inputs */
  --border-hover: #3A3E45;
  --divider: #22252A;
  --text: #F2F2F0;
  --text-strong: #FFFFFF;
  --text-nav: #C9CCD1;
  --text-secondary: #9BA0A8;
  --text-muted: #8A8F98;
  --accent: #F8DE4A;
  --on-accent: #141414;
  --icon-tile-bg: rgba(248, 222, 74, 0.10);
  --icon-tile-fg: #F8DE4A;
  --icon-tile-muted-bg: #1D2024;
  --icon-tile-muted-fg: #9BA0A8;
  --success-fg: #7DD3A8;
  --success-bg: rgba(125, 211, 168, 0.10);
  --success-dot: #7DD3A8;
  --link-accent-color: #F8DE4A;
  --link-accent-underline: transparent;
  --seg-bg: #141518;
  --seg-border: #22252A;
  --seg-active-bg: #2A2D33;
  --seg-active-fg: #FFFFFF;
  --seg-active-shadow: none;
  --badge-border: #33363C;
  --avatar-bg: #2A2D33;
  --avatar-fg: #F2F2F0;
  --card-hover-shadow: none;
  --notif-dot-ring: #0E0F11;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #F6F6F4;
  --surface: #FFFFFF;
  --surface-sidebar: #FFFFFF;
  --surface-topbar: #FFFFFF;
  --surface-subtle: #FAFAF8;
  --surface-input: #F7F7F5;
  --surface-hover: #F7F7F5;
  --nav-active-bg: #F2F2EF;
  --border: #E6E6E3;
  --border-control: #E0E0DC;
  --border-hover: #D4D4CF;
  --divider: #EDEDEA;
  --text: #141414;
  --text-strong: #141414;
  --text-nav: #3A3D42;
  --text-secondary: #5C6068;
  --text-muted: #6B7078;
  --accent: #F8DE4A;
  --on-accent: #141414;
  --icon-tile-bg: #FDF5C4;
  --icon-tile-fg: #6E5500;
  --icon-tile-muted-bg: #F1F1EE;
  --icon-tile-muted-fg: #5C6068;
  --success-fg: #1E7A4C;
  --success-bg: #E6F5EC;
  --success-dot: #1E9E5E;
  --link-accent-color: #141414;
  --link-accent-underline: #F8DE4A;
  --seg-bg: #EDEDEA;
  --seg-border: transparent;
  --seg-active-bg: #FFFFFF;
  --seg-active-fg: #141414;
  --seg-active-shadow: 0 1px 2px rgba(20, 20, 20, 0.08);
  --badge-border: #DCDCD8;
  --avatar-bg: #141414;
  --avatar-fg: #FFFFFF;
  --card-hover-shadow: 0 4px 14px rgba(20, 20, 20, 0.06);
  --notif-dot-ring: #141414;
}

:root {
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 16px;
  --font-sans: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, monospace;
}

html, body {
  margin: 0 !important;
  padding: 0 !important;
  background-color: var(--bg) !important;
  color: var(--text);
  font-family: var(--font-sans);
}

#MetrIQsPixel {
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  line-height: 0 !important;
  display: none !important;
}

/* Theme-adaptive logos */
.logo-light-theme {
  display: none !important;
}
.logo-dark-theme {
  display: block !important;
}

:root[data-theme="light"] .logo-light-theme {
  display: block !important;
}
:root[data-theme="light"] .logo-dark-theme {
  display: none !important;
}

/* Neutralize legacy header black background */
header.topbar-header {
  background-color: var(--surface-topbar) !important;
}