:root {
  --radius-card: 10px;
  --radius-button: 6px;
  --radius-input: 5px;
  --radius-image: 8px;
  --shadow-card: 4px 4px 0 var(--color-accent);
  --shadow-button: 3px 3px 0 var(--color-primary);
  --shadow-button-hover: 0 0 0 var(--color-primary);
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background: var(--color-background);
  color: var(--color-text-primary);
}

img {
  border-radius: var(--radius-image);
}

.section-alt {
  background: var(--color-surface);
}

.section-base {
  background: var(--color-background);
}

.card-brutalist {
  background: var(--color-surface);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

.btn-brutalist {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--color-surface);
  color: var(--color-text-primary);
  border: 3px solid var(--color-primary);
  border-radius: 0;
  box-shadow: var(--shadow-button);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.btn-brutalist:hover,
.btn-brutalist:focus-visible {
  box-shadow: var(--shadow-button-hover);
  transform: translate(3px, 3px);
}

.btn-secondary-brutalist {
  background: var(--color-background);
}

.input-brutalist,
.textarea-brutalist,
.select-brutalist {
  width: 100%;
  background: var(--color-surface);
  color: var(--color-text-primary);
  border: 3px solid var(--color-primary);
  border-radius: var(--radius-input);
  padding: 0.875rem 1rem;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.input-brutalist:focus,
.textarea-brutalist:focus,
.select-brutalist:focus {
  outline: none;
  box-shadow: 3px 3px 0 var(--color-primary-light);
}

.nav-link {
  position: relative;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.nav-link:hover,
.footer-link:hover {
  color: var(--color-primary);
}

.tile-link,
.footer-link,
.text-link {
  transition: color 0.2s ease, transform 0.2s ease;
}

.tile-link:hover,
.text-link:hover {
  color: var(--color-primary);
  transform: translateX(2px);
}

.tile-link:hover .tile-arrow {
  transform: translateX(4px);
}

.tile-arrow {
  transition: transform 0.2s ease;
}

.logo-mark {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 8px;
}

.cookie-banner {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 50;
  background: var(--color-surface);
  border: 3px solid var(--color-primary);
  box-shadow: var(--shadow-card);
  padding: 1rem;
}

.cookie-banner.hidden {
  display: none;
}

.map-frame {
  width: 100%;
  min-height: 320px;
  border: 3px solid var(--color-primary);
  border-radius: var(--radius-image);
  box-shadow: var(--shadow-card);
}

@media (min-width: 768px) {
  .cookie-banner {
    left: auto;
    right: 2rem;
    bottom: 2rem;
    max-width: 28rem;
  }
}