:root {
  --krapik-ink: #111315;
  --krapik-paper: #f7f6f1;
  --krapik-surface: #ffffff;
  --krapik-line: #d8d8d0;
  --krapik-muted: #696d6a;
  --krapik-lime: #ccff00;
  --krapik-lime-deep: #96bd00;
  --krapik-radius-sm: 8px;
  --krapik-radius-md: 14px;
  --krapik-radius-lg: 24px;
  --krapik-shadow: 0 20px 60px rgba(17, 19, 21, 0.09);
  --krapik-wrap: min(1180px, calc(100vw - 48px));
  --krapik-font-display: "Space Grotesk", "Arial Narrow", Arial, sans-serif;
  --krapik-font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --krapik-space-1: clamp(0.5rem, 0.45rem + 0.25vw, 0.75rem);
  --krapik-space-2: clamp(0.9rem, 0.8rem + 0.5vw, 1.25rem);
  --krapik-space-3: clamp(1.25rem, 1rem + 1vw, 2rem);
  --krapik-space-4: clamp(2rem, 1.5rem + 2vw, 4rem);
  --krapik-space-5: clamp(3.5rem, 2.25rem + 4vw, 7rem);
}

.krapik-site,
.krapik-site input,
.krapik-site select,
.krapik-site textarea,
.krapik-site button {
  font-family: var(--krapik-font-body);
}

.krapik-site h1,
.krapik-site h2,
.krapik-site h3,
.krapik-site h4,
.krapik-site h5,
.krapik-site h6,
.krapik-site .site-title,
.krapik-site .main-navigation,
.krapik-site .mobile-navigation {
  font-family: var(--krapik-font-display);
}

.krapik-site {
  background: var(--krapik-paper);
  color: var(--krapik-ink);
}

.krapik-site ::selection {
  background: var(--krapik-lime);
  color: var(--krapik-ink);
}

.krapik-site :focus-visible {
  outline: 3px solid var(--krapik-lime-deep);
  outline-offset: 3px;
}