/* Theme and density overrides */

/* Dark theme - override a minimal set of tokens for good contrast */
:root[data-theme='dark'] {
  --color-bg-primary: var(--color-gray-900);
  --color-bg-secondary: var(--color-gray-800);
  --color-bg-tertiary: #1f1f22;

  --color-surface-elevated: #1e1e21;
  --color-surface-base: #161618;
  --color-surface-sunken: #131316;

  --color-text-primary: #f3f4f6;
  --color-text-secondary: #c3c6cf;
  --color-text-tertiary: #9aa0aa;

  --color-border-light: #2b2b2f;
  --color-border-medium: #3a3a40;
  --color-border-dark: #4b4b52;
}

/* Sidebar fixes in dark theme: remove light gradient/blur and use solid dark surfaces */
:root[data-theme='dark'] .sidebar {
  background: linear-gradient(180deg, var(--color-surface-elevated) 0%, var(--color-surface-base) 100%);
  border-right-color: var(--color-border-dark);
  backdrop-filter: none;
}

/* Dark-friendly hover background for nav items */
:root[data-theme='dark'] .nav-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-text-primary);
}

/* Dark theme: ensure hover/focus reflect current accent for icons/text */
:root[data-theme='dark'] .nav-item:hover .nav-icon,
:root[data-theme='dark'] .nav-item.active .nav-icon {
  color: var(--color-primary-400);
}

/* Keep active nav item style stable on hover (both themes) */
.nav-item.active:hover {
  background: var(--color-primary-50);
  color: var(--color-primary-700);
}

/* Dark theme: active nav item stable hover */
:root[data-theme='dark'] .nav-item.active {
  background: var(--color-primary-light);
  color: var(--color-primary-400);
}

:root[data-theme='dark'] .nav-item.active:hover {
  background: var(--color-primary-light);
  color: var(--color-primary-400);
}

/* Dark theme: logo icon white */
:root[data-theme='dark'] .logo svg {
  color: var(--color-white);
}

/* Density: cozy is default. Compact reduces a few core spacings. Comfortable increases slightly. */
:root[data-density='compact'] {
  --space-1: 0.2rem;
  --space-2: 0.4rem;
  --space-3: 0.6rem;
  --space-4: 0.85rem;
  --space-5: 1.1rem;
  --space-6: 1.3rem;
  --space-8: 1.75rem;
  --space-10: 2.25rem;
}

:root[data-density='comfortable'] {
  --space-1: 0.3rem;
  --space-2: 0.55rem;
  --space-3: 0.85rem;
  --space-4: 1.1rem;
  --space-5: 1.4rem;
  --space-6: 1.7rem;
  --space-8: 2.25rem;
  --space-10: 2.75rem;
}


/* Accent themes (override primary tokens). Default brand uses base tokens. */
:root[data-accent='ocean'] {
  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-primary-light: rgba(37, 99, 235, 0.12);
  --color-primary-50: #eff6ff;
  --color-primary-100: #dbeafe;
  --color-primary-400: #60a5fa;
  --color-primary-500: #3b82f6;
  --color-primary-600: #2563eb;
  --color-primary-700: #1d4ed8;
  --gradient-primary: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  --gradient-primary-hover: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
}

:root[data-accent='violet'] {
  --color-primary: #7c3aed;
  --color-primary-hover: #6d28d9;
  --color-primary-light: rgba(124, 58, 237, 0.12);
  --color-primary-50: #f5f3ff;
  --color-primary-100: #ede9fe;
  --color-primary-400: #a78bfa;
  --color-primary-500: #8b5cf6;
  --color-primary-600: #7c3aed;
  --color-primary-700: #6d28d9;
  --gradient-primary: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  --gradient-primary-hover: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
}

/* Forest green */
:root[data-accent='forest'] {
  --color-primary: #166534; /* emerald-800 */
  --color-primary-hover: #14532d;
  --color-primary-light: rgba(22, 101, 52, 0.14);
  --color-primary-50: #ecfdf5;
  --color-primary-100: #d1fae5;
  --color-primary-400: #34d399;
  --color-primary-500: #10b981;
  --color-primary-600: #059669;
  --color-primary-700: #047857;
  --gradient-primary: linear-gradient(135deg, #10b981 0%, #166534 100%);
  --gradient-primary-hover: linear-gradient(135deg, #059669 0%, #14532d 100%);
}

/* Amber */
:root[data-accent='amber'] {
  --color-primary: #d97706; /* amber-600 */
  --color-primary-hover: #b45309;
  --color-primary-light: rgba(217, 119, 6, 0.14);
  --color-primary-50: #fffbeb;
  --color-primary-100: #fef3c7;
  --color-primary-400: #f59e0b;
  --color-primary-500: #f59e0b;
  --color-primary-600: #d97706;
  --color-primary-700: #b45309;
  --gradient-primary: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  --gradient-primary-hover: linear-gradient(135deg, #d97706 0%, #b45309 100%);
}