@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500;600&family=Fira+Code:wght@400;500&display=swap');

:root {
  --brand-primary:  #2563eb;
  --brand-accent:   #059669;
  --surface-body:   #0f172a;
  --surface-card:   #1e293b;
  --surface-muted:  #334155;
  --ink:            #f1f5f9;
  --ink-soft:       #94a3b8;
  --hairline:       #e2e8f0;
  --radius:         0.5rem;
  --radius-sm:      0.25rem;
  --shadow-sm:      0 1px 3px rgba(0,0,0,.08);
  --shadow:         0 4px 12px rgba(0,0,0,.10);
}

body {
  font-family: 'Fira Sans', sans-serif;
  background: #f8fafc;
  color: #1e293b;
}

.font-monospace,
.card-header,
h1, h2, h3, h4, h5, h6 {
  font-family: 'Fira Code', monospace;
}

/* ── Sidebar ── */
.sidebar {
  background: var(--surface-body);
}

.sidebar-link {
  color: var(--ink-soft);
  border-radius: var(--radius-sm);
  padding: .45rem .75rem;
  transition: background .15s, color .15s;
}

.sidebar-link:hover {
  background: var(--surface-muted);
  color: var(--ink);
}

.sidebar-link.active {
  background: var(--brand-primary);
  color: #fff;
}

/* ── Cards ── */
.card {
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.card-header {
  background: #f1f5f9;
  border-bottom: 1px solid var(--hairline);
  font-size: .875rem;
  font-weight: 500;
}

/* ── Bootstrap overrides ── */
:root {
  --bs-primary:     var(--brand-primary);
  --bs-primary-rgb: 37,99,235;
  --bs-success:     var(--brand-accent);
  --bs-success-rgb: 5,150,105;
}

.btn-primary {
  --bs-btn-bg:           var(--brand-primary);
  --bs-btn-border-color: var(--brand-primary);
  --bs-btn-hover-bg:     #1d4ed8;
}