/* Design tokens. Dark mode only swaps these variables (Bootstrap 5.3 data-bs-theme). */
:root {
  --se-primary: #2563EB;
  --se-primary-rgb: 37, 99, 235;
  --se-primary-dark: #1D4ED8;
  --se-primary-soft: #DBEAFE;
  --se-secondary: #64748B;
  --se-bg: #F8FAFC;
  --se-surface: #FFFFFF;
  --se-surface-2: #F1F5F9;
  --se-success: #16A34A;
  --se-warning: #F59E0B;
  --se-danger: #DC2626;
  --se-text: #0F172A;
  --se-muted: #64748B;
  --se-border: #E2E8F0;
  --se-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 4px 14px rgba(15, 23, 42, .06);
  --se-shadow-lg: 0 10px 30px rgba(15, 23, 42, .14);
  --se-radius: .75rem;
  --se-radius-sm: .5rem;
  --se-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --se-navbar-h: 72px;

  /* Map onto Bootstrap variables so utilities follow the theme */
  --bs-primary: var(--se-primary);
  --bs-primary-rgb: var(--se-primary-rgb);
  --bs-body-bg: var(--se-bg);
  --bs-body-color: var(--se-text);
  --bs-body-font-family: var(--se-font);
  --bs-border-color: var(--se-border);
  --bs-secondary-color: var(--se-muted);
  --bs-link-color: var(--se-primary);
  --bs-link-hover-color: var(--se-primary-dark);
  --bs-link-color-rgb: var(--se-primary-rgb);
}

[data-bs-theme="dark"] {
  --se-primary: #60A5FA;
  --se-primary-rgb: 96, 165, 250;
  --se-primary-dark: #93C5FD;
  --se-primary-soft: #172554;
  --se-secondary: #94A3B8;
  --se-bg: #0B1220;
  --se-surface: #111A2E;
  --se-surface-2: #17223B;
  --se-text: #E2E8F0;
  --se-muted: #94A3B8;
  --se-border: #24324D;
  --se-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .3);
  --se-shadow-lg: 0 10px 30px rgba(0, 0, 0, .5);
  --bs-body-bg: var(--se-bg);
  --bs-body-color: var(--se-text);
  --bs-border-color: var(--se-border);
  --bs-secondary-bg: var(--se-surface-2);
  --bs-tertiary-bg: var(--se-surface-2);
}