:root,
body[data-theme="auto"] {
  color-scheme: light dark;

  /* Base swatch */
  --swatch-50: #f5f7fb;
  --swatch-200: #d6e4ff;
  --swatch-400: #4b5a70;
  --swatch-500: #1f2a37;
  --swatch-900: #0f172a;

  /* Core palette tokens */
  --color-background: var(--swatch-500);
  --color-surface: var(--swatch-50);
  --color-surface-alt: #ffffff;
  --color-elevated: rgba(251, 249, 249, 0.88);
  --color-text-primary: var(--swatch-900);
  --color-text-secondary: var(--swatch-400);
  --color-border: rgba(15, 23, 42, 0.08);
  --color-border-strong: rgba(15, 23, 42, 0.18);
  --color-bg: var(--color-background);
  --color-text: var(--color-text-primary);
  --accent-strong: #2563eb;
  --accent-soft: color-mix(in srgb, var(--accent-strong) 24%, transparent 76%);
  --command-bar-bg: color-mix(in srgb, var(--color-surface) 85%, var(--accent-strong) 15%);
  --command-bar-border: rgba(37, 99, 235, 0.18);
  --list-row-hover-bg: color-mix(in srgb, var(--accent-strong) 15%, transparent 85%);
  --list-row-selected-bg: color-mix(in srgb, var(--accent-strong) 22%, transparent 78%);
  --list-divider: rgba(15, 23, 42, 0.08);
  --reading-pane-bg: var(--color-surface);

  /* Accent + component aliases (legacy friendly) */
  --primary-color: var(--accent-strong);
  --primary-dark: #1e4fd3;
  --secondary-color: var(--swatch-50);
  --accent-color: var(--accent-strong);
  --text-primary: var(--color-text-primary);
  --text-secondary: var(--color-text-secondary);
  --border-color: var(--color-border-strong);

  /* Application surfaces */
  --app-background: linear-gradient(135deg, var(--swatch-50) 0%, var(--swatch-500) 100%);
  --sidebar-background: linear-gradient(180deg, #1f2937 0%, #111827 100%);
  --sidebar-text: #ecf2ff;
  --toolbar-background: color-mix(in srgb, var(--swatch-50) 78%, var(--accent-strong) 22%);
  --surface-shadow: 0 20px 40px rgba(15, 23, 42, 0.12);

  /* Interactive tokens */
  --link-color: var(--accent-strong);
  --link-hover-color: #1746a2;
  --button-primary-bg: var(--accent-strong);
  --button-primary-bg-hover: color-mix(in srgb, var(--accent-strong) 82%, #1e40af 18%);
  --button-primary-text: #ffffff;
  --button-secondary-bg: #e2e8f0;
  --button-secondary-text: var(--swatch-900);

  /* Status + alerts */
  --success-color: #16a34a;
  --warning-color: #f59e0b;
  --danger-color: #dc2626;
  --status-connected-bg: color-mix(in srgb, var(--success-color) 18%, var(--swatch-50) 82%);
  --status-connected-text: var(--swatch-900);
  --status-warning-bg: color-mix(in srgb, var(--warning-color) 16%, var(--swatch-50) 84%);
  --status-warning-text: var(--swatch-900);
  --status-error-bg: color-mix(in srgb, var(--danger-color) 12%, var(--swatch-50) 88%);
  --status-error-text: var(--swatch-900);
}

@media (prefers-color-scheme: dark) {
  :root,
  body[data-theme="auto"] {
    color-scheme: dark;
    --color-background: #0b1220;
    --color-surface: #101828;
    --color-surface-alt: #111827;
    --color-elevated: rgba(17, 24, 39, 0.95);
    --color-text-primary: #f8fafc;
    --color-text-secondary: #94a3b8;
    --color-border: rgba(148, 163, 184, 0.18);
    --color-border-strong: rgba(148, 163, 184, 0.28);
    --app-background: linear-gradient(135deg, #0b1220 0%, #111827 100%);
    --sidebar-background: linear-gradient(180deg, #111c2f 0%, #0b1220 100%);
    --sidebar-text: #ecfeff;
    --toolbar-background: color-mix(in srgb, rgba(15, 23, 42, 0.85) 70%, var(--accent-strong) 30%);
    --surface-shadow: 0 24px 48px rgba(2, 6, 23, 0.55);
    --link-hover-color: #93c5fd;
    --button-primary-text: #ffffff;
    --button-secondary-bg: #1f2937;
    --button-secondary-text: #e2e8f0;
    --accent-strong: #60a5fa;
    --accent-soft: color-mix(in srgb, var(--accent-strong) 28%, transparent 72%);
    --command-bar-bg: color-mix(in srgb, rgba(15, 23, 42, 0.85) 70%, var(--accent-strong) 30%);
    --command-bar-border: rgba(96, 165, 250, 0.25);
    --list-row-hover-bg: color-mix(in srgb, var(--accent-strong) 20%, transparent 80%);
    --list-row-selected-bg: color-mix(in srgb, var(--accent-strong) 32%, transparent 68%);
    --list-divider: rgba(148, 163, 184, 0.18);
    --reading-pane-bg: rgba(17, 24, 39, 0.92);
    --status-connected-bg: color-mix(in srgb, var(--success-color) 35%, transparent 65%);
    --status-connected-text: #d1fae5;
    --status-warning-bg: color-mix(in srgb, var(--warning-color) 30%, transparent 70%);
    --status-warning-text: #fffbeb;
    --status-error-bg: color-mix(in srgb, var(--danger-color) 25%, transparent 75%);
    --status-error-text: #fee2e2;
  }
}

body {
  background: var(--app-background);
  color: var(--color-text-primary);
  transition:
    background 0.3s ease,
    color 0.3s ease;
}

body.theme-light,
body[data-theme="light"] {
  color-scheme: light;
  --app-background: linear-gradient(135deg, var(--swatch-50) 0%, var(--swatch-500) 100%);
  --color-surface: var(--swatch-50);
  --color-surface-alt: #ffffff;
  --color-text-primary: var(--swatch-900);
  --color-text-secondary: var(--swatch-400);
  --color-border: rgba(15, 23, 42, 0.08);
  --color-border-strong: rgba(15, 23, 42, 0.18);
}

body.theme-dark,
body[data-theme="dark"] {
  color-scheme: dark;
  background: linear-gradient(135deg, #1d102c 0%, #4d4f6d 100%);
  color: var(--color-text-primary);
}

.surface-card {
  background: var(--color-surface);
  color: var(--color-text-primary);
  border-radius: 12px;
  border: 1px solid var(--color-border);
  box-shadow: var(--surface-shadow);
  transition:
    background 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.surface-muted {
  background: var(--color-surface-alt);
}

.btn-primary-theme {
  background: var(--button-primary-bg);
  color: var(--button-primary-text);
  border: 1px solid transparent;
}

.btn-primary-theme:hover {
  background: var(--button-primary-bg-hover);
}

.btn-secondary-theme {
  background: var(--button-secondary-bg);
  color: var(--button-secondary-text);
  border: 1px solid transparent;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  font-size: 0.75rem;
}

.status-pill.connected {
  background: var(--status-connected-bg);
  color: var(--status-connected-text);
}

.status-pill.warning {
  background: var(--status-warning-bg);
  color: var(--status-warning-text);
}

.status-pill.error {
  background: var(--status-error-bg);
  color: var(--status-error-text);
}

/* Placeholder for future per-user palette overrides.
   Example: body[data-palette="custom-name"] { --primary-color: ...; } */