:root {
  --bs-font-sans-serif: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);

  /* OpenOChem semantic tokens — light */
  --oc-bg: #f8f9fa;
  --oc-surface: #ffffff;
  --oc-surface-2: #f1f3f5;
  --oc-border: #e5e7eb;
  --oc-border-strong: #d1d5db;
  --oc-text: #1f2937;
  --oc-text-muted: #6b7280;
  --oc-accent: #0d6efd;
  --oc-accent-soft: #eef2ff;
  --oc-accent-soft-border: #c7d2fe;
  --oc-accent-text: #1d4ed8;
  --oc-mol-paper: #eef2f6;
  --oc-shadow: 0 2px 12px rgba(15, 23, 42, 0.08);
  --oc-shadow-lg: 0 12px 30px rgba(15, 23, 42, 0.14);
  --oc-overlay: rgba(15, 23, 42, 0.35);
  --oc-ai-bubble: #e9ecef;
  --oc-hover-surface: #f3f4f6;

  /* App-token aliases used by embedded tools */
  --primary: #0d6efd;
  --primary-dark: #0b5ed7;
  --secondary: #6c757d;
  --success: #28a745;
  --bg-primary: var(--oc-surface);
  --bg-secondary: var(--oc-surface-2);
  --border: var(--oc-border);
  --text-primary: var(--oc-text);
  --text-secondary: var(--oc-text-muted);
  --shadow: var(--oc-shadow);
}

/* Soft-dark: slate chrome, never pure black */
[data-bs-theme="dark"] {
  color-scheme: dark;

  --oc-bg: #1a2332;
  --oc-surface: #243044;
  --oc-surface-2: #2e3a4f;
  --oc-border: #3d4a63;
  --oc-border-strong: #4b5a75;
  --oc-text: #e8edf5;
  --oc-text-muted: #a8b3c7;
  --oc-accent: #6ea8fe;
  --oc-accent-soft: #2a3a5c;
  --oc-accent-soft-border: #3d5a8a;
  --oc-accent-text: #9ec1ff;
  --oc-mol-paper: #eef2f6;
  --oc-shadow: 0 2px 16px rgba(0, 0, 0, 0.28);
  --oc-shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.4);
  --oc-overlay: rgba(8, 12, 20, 0.55);
  --oc-ai-bubble: #2e3a4f;
  --oc-hover-surface: #334155;

  --primary: #6ea8fe;
  --primary-dark: #3d8bfd;
  --secondary: #a8b3c7;
  --success: #75b798;
  --bg-primary: var(--oc-surface);
  --bg-secondary: var(--oc-surface-2);
  --border: var(--oc-border);
  --text-primary: var(--oc-text);
  --text-secondary: var(--oc-text-muted);
  --shadow: var(--oc-shadow);

  /* Soften Bootstrap dark defaults */
  --bs-body-bg: #1a2332;
  --bs-body-color: #e8edf5;
  --bs-secondary-bg: #243044;
  --bs-tertiary-bg: #2e3a4f;
  --bs-border-color: #3d4a63;
  --bs-border-color-translucent: rgba(232, 237, 245, 0.15);
  --bs-emphasis-color: #f8fafc;
  --bs-secondary-color: rgba(232, 237, 245, 0.72);
  --bs-tertiary-color: rgba(232, 237, 245, 0.55);
  --bs-link-color: #9ec1ff;
  --bs-link-hover-color: #c5d8ff;
  --bs-primary-bg-subtle: #2a3a5c;
  --bs-secondary-bg-subtle: #2e3a4f;
  --bs-light-bg-subtle: #2e3a4f;
  --bs-dark-bg-subtle: #1a2332;
  --bs-light-border-subtle: #3d4a63;
  --bs-dark-border-subtle: #3d4a63;
  --bs-light-text-emphasis: #e8edf5;
  --bs-dark-text-emphasis: #e8edf5;
  --bs-primary-text-emphasis: #9ec1ff;
}

body {
  font-family: var(--bs-font-sans-serif);
  background-color: var(--oc-bg);
  color: var(--oc-text);
}

/* Theme-aware chrome helpers */
.oc-navbar {
  background-color: var(--oc-surface) !important;
  border-color: var(--oc-border) !important;
}

.oc-footer {
  background-color: var(--oc-surface-2) !important;
  border-color: var(--oc-border) !important;
  color: var(--oc-text-muted);
}

.oc-mol-paper {
  background-color: var(--oc-mol-paper) !important;
  color: #1f2937;
}

.oc-theme-toggle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--oc-border-strong);
  background: var(--oc-surface);
  color: var(--oc-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.oc-theme-toggle:hover {
  background: var(--oc-accent-soft);
  border-color: var(--oc-accent-soft-border);
  color: var(--oc-accent-text);
}

.oc-theme-toggle i {
  font-size: 1.1rem;
  line-height: 1;
}

[data-bs-theme="dark"] .text-dark {
  color: var(--oc-text) !important;
}

[data-bs-theme="dark"] .bg-white {
  background-color: var(--oc-surface) !important;
}

[data-bs-theme="dark"] .bg-light {
  background-color: var(--oc-surface-2) !important;
}

[data-bs-theme="dark"] .border,
[data-bs-theme="dark"] .border-bottom,
[data-bs-theme="dark"] .border-top,
[data-bs-theme="dark"] .border-end,
[data-bs-theme="dark"] .border-start {
  border-color: var(--oc-border) !important;
}

[data-bs-theme="dark"] .text-muted {
  color: var(--oc-text-muted) !important;
}

/* Molecule paper must stay light even when parents use bg-white remaps */
[data-bs-theme="dark"] .oc-mol-paper,
[data-bs-theme="dark"] .oc-mol-paper.bg-white {
  background-color: var(--oc-mol-paper) !important;
  color: #1f2937 !important;
}