/* Adam Bell — Dark Mode Theme */

/* Inter from Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Source+Code+Pro:wght@300;400;500;700&display=swap");

/* ── Color & font tokens ── */
:root {
  /* Typography */
  --bs-font-sans-serif: "Inter", sans-serif;
  --bs-font-monospace: "Source Code Pro", monospace;

  /* Accent */
  --tf-accent:          #e2e8f0;
  --tf-accent-soft:     #94a3b8;
  --tf-accent-muted:    #64748b;

  /* Surfaces */
  --tf-page-bg-color:       #0f1117;
  --tf-footer-bg-color:     #1a1d27;
  --tf-projects-bg-color:   #151820;

  /* Links */
  --bs-link-color:          #93c5fd;
  --bs-link-hover-color:    #bfdbfe;

  /* Pills & icons */
  --tf-pill-bg:             #1e293b;
  --tf-icon-fill:           #94a3b8;
  --tf-icon-hover:          #e2e8f0;

  /* Bootstrap overrides */
  --bs-body-bg:             #0f1117;
  --bs-body-color:          #e2e8f0;
  --bs-border-color:        #1e293b;
}

/* ── Base ── */
html, body {
  background-color: #0f1117 !important;
  color: #e2e8f0 !important;
}

body {
  font-weight: 400;
  letter-spacing: -0.01em;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #f1f5f9;
}

/* ── Links ── */
a {
  text-decoration: none;
  transition: color 0.15s ease;
}

a:hover {
  color: #bfdbfe;
}

/* ── Navigation ── */
.navbar {
  border-bottom: 1px solid #1e293b !important;
  background-color: #0f1117 !important;
}

.navbar-brand {
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
  color: #f1f5f9 !important;
}

.nav-link {
  font-weight: 500;
  font-size: 0.9rem;
  color: #94a3b8 !important;
  transition: color 0.15s ease;
}

.nav-link:hover {
  color: #f1f5f9 !important;
}

/* Navbar social icons */
.tf-nav-social .tf-social {
  height: 1.2em;
  width: 1.2em;
}

.tf-nav-social span {
  display: none;
}

/* ── Hero / header section ── */
.bg-gradient {
  background: linear-gradient(160deg, #13161f 0%, #0f1117 100%) !important;
  border-bottom: 1px solid #1e293b !important;
}

.bg-light {
  background-color: #0f1117 !important;
}

/* ── Cards ── */
.card {
  background-color: #151820 !important;
  border: 1px solid #1e293b !important;
  border-radius: 8px;
  box-shadow: none;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  color: #e2e8f0 !important;
}

.card:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  transform: translateY(-2px);
}

.card-footer {
  background-color: #151820 !important;
  border-top: 1px solid #1e293b !important;
  color: #94a3b8;
}

.card-title, .card-text {
  color: #e2e8f0 !important;
}

/* ── Pills / labels ── */
.badge {
  background-color: #1e293b !important;
  color: #93c5fd !important;
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.01em;
  border-radius: 4px;
  padding: 0.3em 0.65em;
}

/* ── Social icons ── */
.tf-social {
  display: inline-block;
  fill: var(--tf-icon-fill);
  height: 1.5em;
  vertical-align: -0.1em;
  width: 1.5em;
  transition: fill 0.2s ease;
}

.tf-social:hover {
  fill: var(--tf-icon-hover);
}

/* ── Navbar social icons ── */
.tf-nav-icon {
  display: inline-block;
  fill: #64748b;
  height: 1.2em;
  width: 1.2em;
  vertical-align: -0.1em;
  transition: fill 0.2s ease;
}

.tf-nav-icon:hover {
  fill: #f1f5f9;
}

/* ── Footer ── */
footer {
  border-top: 1px solid #1e293b;
  font-size: 0.85rem;
  color: #64748b;
  background-color: #0f1117 !important;
}

/* ── Code blocks ── */
pre, code {
  font-family: var(--bs-font-monospace);
  font-size: 0.875em;
  background-color: #1a1d27 !important;
  color: #93c5fd !important;
  border-radius: 4px;
}

pre {
  padding: 1rem;
  border: 1px solid #1e293b;
}

/* ── Sections ── */
.py-3 {
  background-color: #0f1117 !important;
}

/* ── Utility ── */
.display-4, .display-6 {
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #f1f5f9 !important;
}

hr {
  border-color: #1e293b;
  opacity: 1;
}

p, li {
  color: #cbd5e1;
}

.text-muted {
  color: #64748b !important;
}

.btn-primary {
  background-color: #1e40af;
  border-color: #1e40af;
}

.btn-primary:hover {
  background-color: #1d4ed8;
  border-color: #1d4ed8;
}