:root {
  --sl-color-accent-low: #dff7f1;
  --sl-color-accent: #0d8b73;
  --sl-color-accent-high: #063d34;
  --sl-color-white: #0b1513;
  --sl-color-gray-1: #1d302b;
  --sl-color-gray-2: #3f5c55;
  --sl-color-gray-3: #718b84;
  --sl-color-gray-4: #c5d6d1;
  --sl-color-gray-5: #e1ebe8;
  --sl-color-gray-6: #f2f7f5;
  --sl-color-black: #ffffff;
  --sl-font:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
}

:root[data-theme="dark"] {
  --sl-color-accent-low: #0b3a31;
  --sl-color-accent: #4be0bd;
  --sl-color-accent-high: #d6fff4;
  --sl-color-white: #f0f8f6;
  --sl-color-gray-1: #dbe9e5;
  --sl-color-gray-2: #aec4be;
  --sl-color-gray-3: #78948d;
  --sl-color-gray-4: #405b54;
  --sl-color-gray-5: #1c332d;
  --sl-color-gray-6: #0d1b18;
  --sl-color-black: #07100e;
}

.site-title img {
  color: var(--sl-color-accent);
}

.hero {
  padding-block: clamp(3rem, 9vw, 7rem);
}

.hero h1 {
  max-width: 14ch;
  font-size: clamp(2.8rem, 7vw, 5.6rem);
  letter-spacing: -0.055em;
}

.hero .tagline {
  max-width: 48rem;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
}

.sl-link-card {
  border-radius: 0.85rem;
}

.content-panel img:not(.inline-icon) {
  border: 1px solid var(--sl-color-gray-5);
  border-radius: 0.8rem;
  box-shadow: 0 18px 44px rgb(7 16 14 / 12%);
}

code {
  border-radius: 0.25rem;
}