:root {
  --brand-primary: #2F81F7;
  --brand-accent:  #00E0B8;
  --brand-purple:  #9D4BFF;
  --fg: #0F1115;
  --bg: #FFFFFF;
  --muted: #6B7280;
  --success: #00C853;
  --warning: #F59E0B;
  --danger:  #EF4444;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
  --border: #E5E7EB;
  --surface-1: #F8FAFC;
  --surface-2: #EEF2F7;
  --focus-ring: rgba(47,129,247,.4);
  /* Bridge tokens -> Bootstrap color mode */
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--fg);
  --bs-primary: var(--brand-primary);
  --bs-success: var(--success);
  --bs-warning: var(--warning);
  --bs-danger:  var(--danger);
  --bs-link-color: var(--brand-primary);
  --bs-link-hover-color: var(--brand-primary);
  --bs-border-radius: var(--radius);
  --bs-border-radius-lg: var(--radius);
  --bs-border-color: var(--border);
  --bs-card-bg: var(--surface-1);
  --bs-card-border-color: var(--border);
  --bs-card-border-radius: var(--radius);
  --bs-card-box-shadow: var(--shadow);
  color-scheme: light;
}
:root[data-theme="dark"]{
  --fg: #E6EAF2;
  --bg: #0B0F14;
  --muted: #95A3B8;
  --shadow: 0 12px 40px rgba(0,0,0,.4);
  --border: rgba(255,255,255,.12);
  --surface-1: rgba(255,255,255,.04);
  --surface-2: rgba(255,255,255,.06);
  --bs-card-bg: var(--surface-1);
  --bs-border-color: var(--border);
  /* Let the UA and components know we're dark */
  color-scheme: dark;
}