/* Import edgy, modern fonts */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');


/* Font system */
:root {
  --heading-font: 'Space Grotesk', sans-serif;
  --body-font: 'Space Grotesk', sans-serif;
  --mono-font: 'JetBrains Mono', monospace;
  
  /* Color palette */
  --primary-color: #1A1A1A;
  --secondary-color: #4A90E2;
  --accent-color: #50E3C2;
  --highlight-color: #FFD700;
  --background-color: #FFFFFF;
  --text-color: #2c3e50;
  --heading-color: #1A1A1A;
  --border-color: #E5E7EB;
  
  /* Typography scale */
  --h1-size: 3.2rem;
  --h2-size: 2.4rem;
  --h3-size: 1.8rem;
  --h4-size: 1.4rem;
  --h5-size: 1.2rem;
  --h6-size: 1rem;
  --body-size: 1rem;
  
  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 4rem;
}

/* Base typography */
body {
  text-align: left;                /* add this here */
  font-family: var(--body-font);
  font-size: var(--body-size);
  font-weight: 400;
  line-height: 1.7;
  color: var(--text-color);
  letter-spacing: -0.01em;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--heading-font);
  font-weight: 600;
  color: var(--heading-color);
  letter-spacing: -0.03em;
  line-height: 1.2;
}

h1 { 
  font-size: var(--h1-size); 
  font-weight: 700;
  letter-spacing: -0.04em;
}
h2 { font-size: var(--h2-size); }
h3 { font-size: var(--h3-size); }
h4 { font-size: var(--h4-size); }
h5 { font-size: var(--h5-size); }
h6 { font-size: var(--h6-size); }

/* Code styling */
code, pre {
  font-family: var(--mono-font);
  font-weight: 500;
}

/* Links */
a {
  color: var(--secondary-color);
  text-decoration: none;
  font-weight: 500;
  transition: all 0.2s ease;
}

a:hover {
  color: var(--accent-color);
  text-decoration: underline;
}

/* Enhanced scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--background-color);
}

::-webkit-scrollbar-thumb {
  background: var(--accent-color);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--secondary-color);
}

/* Responsive typography */
@media (max-width: 768px) {
  :root {
    --h1-size: 2.4rem;
    --h2-size: 2rem;
    --h3-size: 1.6rem;
    --h4-size: 1.3rem;
    --body-size: 0.95rem;
  }
  
  body {
    line-height: 1.6;
  }
}

/* Focus states for accessibility */
a:focus, button:focus {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
}


/* ===== NAVBAR: remove white pill backgrounds & keep icons crisp ===== */

/* make the bar itself transparent (or comment this out if you want solid) */
.navbar, .navbar .container-fluid { 
  background: transparent !important; 
  box-shadow: none !important; 
}

/* nuke background fills on hover/active/focus */
.navbar .nav-link,
.navbar .navbar-brand,
.navbar .dropdown-toggle {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important; /* prevents pill rounding from showing */
}

.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link:active,
.navbar .navbar-nav .nav-link.active,
.navbar .navbar-nav .show > .nav-link,
.navbar .nav-item.show > .nav-link {
  background: transparent !important;
  color: var(--secondary-color) !important; /* your blue on hover/active */
  text-decoration: none;
}

/* icon treatment (Bootstrap Icons, SVG, or images) */
.navbar .nav-link i,
.navbar .nav-link svg,
.navbar .navbar-brand svg,
.navbar .navbar-brand img {
  background: transparent !important;
  fill: currentColor;            /* affects inline SVG */
  width: 1.1em; height: 1.1em;
  vertical-align: -0.15em;
}

/* default link color for both themes */
.navbar .nav-link, 
.navbar .navbar-brand { color: var(--heading-color) !important; }
:where([data-bs-theme="dark"]) .navbar .nav-link,
:where([data-bs-theme="dark"]) .navbar .navbar-brand { color: #fff !important; }

/* OPTIONAL: glassy bar; comment out for fully clear */
.navbar { backdrop-filter: saturate(180%) blur(6px); background-color: rgba(255,255,255,.6); }
:where([data-bs-theme="dark"]) .navbar { background-color: rgba(16,16,16,.45); }