:root {
  --background: 40 25% 97%;
  --foreground: 220 18% 13%;
  --card: 40 20% 95%;
  --primary: 220 18% 13%;
  --primary-foreground: 40 25% 97%;
  --secondary: 40 15% 92%;
  --muted-foreground: 220 8% 46%;
  /* Accent #ff3333 */
  --accent: 0 100% 60%;
  --accent-foreground: 40 25% 97%;
  --border: 40 15% 88%;
  --radius: 0.375rem;
}

.dark {
  /* Dark theme: pitch-black canvas with slightly lifted surfaces */
  --background: 0 0% 0%;      /* page background: pure black */
  --foreground: 0 0% 96%;     /* main text */
  --card: 0 0% 7%;            /* cards/sections */
  --primary: 0 0% 96%;
  --primary-foreground: 0 0% 0%;
  --secondary: 0 0% 10%;      /* nav, subtle surfaces */
  --muted-foreground: 0 0% 65%;
  --accent-foreground: 0 0% 100%; /* Send besked text on accent stays white in dark mode */
  --border: 0 0% 18%;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Space Grotesk", sans-serif;
}

/* Inline images from blog content ![alt](url) */
.blog-inline-img {
  display: block;
  max-width: 100%;
  width: auto;
  height: auto;
  max-height: min(70vh, 560px);
  object-fit: contain;
  margin: 1.5rem auto;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px hsl(0 0% 0% / 0.08);
  border: 1px solid hsl(var(--border) / 0.5);
}

/* Fullscreen image lightbox for blog images */
.image-lightbox-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: center;
  background: hsl(0 0% 0% / 0.8);
  cursor: zoom-out;
}

.image-lightbox-backdrop.is-visible {
  display: flex;
}

.image-lightbox-img {
  max-width: min(96vw, 1024px);
  max-height: 90vh;
  border-radius: 0.75rem;
  box-shadow: 0 20px 45px hsl(0 0% 0% / 0.55);
  border: 1px solid hsl(var(--border) / 0.6);
  background: hsl(var(--card));
}

.section-padding {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

@media (min-width: 768px) {
  .section-padding {
    padding-left: 3rem;
    padding-right: 3rem;
  }
}

@media (min-width: 1024px) {
  .section-padding {
    padding-left: 4rem;
    padding-right: 4rem;
  }
}

.scroll-reveal {
  animation: fadeUp 0.6s ease forwards;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}