:root {
  --kknh-forest: #1f5a47;
  --kknh-moss: #2f7a5a;
  --kknh-sun: #f3c95a;
  --kknh-cream: #f7f1e5;
  --kknh-charcoal: #20252b;
  --kknh-sand: #ece2cf;
}

html {
  scroll-behavior: smooth;
}

body {
  background:
    radial-gradient(circle at top left, rgba(243, 201, 90, 0.22), transparent 28rem),
    radial-gradient(circle at 85% 10%, rgba(47, 122, 90, 0.12), transparent 26rem),
    linear-gradient(180deg, #fffdf8 0%, #f7f1e5 100%);
  color: var(--kknh-charcoal);
}

::selection {
  background: rgba(243, 201, 90, 0.35);
}

.kknh-shell {
  position: relative;
  overflow: hidden;
}

.kknh-shell::before,
.kknh-shell::after {
  content: "";
  position: absolute;
  inset: auto;
  width: 22rem;
  height: 22rem;
  border-radius: 9999px;
  filter: blur(2px);
  z-index: 0;
  pointer-events: none;
}

.kknh-shell::before {
  top: -8rem;
  right: -8rem;
  background: radial-gradient(circle, rgba(243, 201, 90, 0.2), transparent 68%);
}

.kknh-shell::after {
  bottom: 10rem;
  left: -10rem;
  background: radial-gradient(circle, rgba(47, 122, 90, 0.12), transparent 70%);
}

.kknh-grain {
  position: relative;
}

.kknh-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.06)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='.09'%3E%3Ccircle cx='30' cy='30' r='1.1'/%3E%3Ccircle cx='94' cy='54' r='1.2'/%3E%3Ccircle cx='149' cy='22' r='1'/%3E%3Ccircle cx='132' cy='110' r='1.2'/%3E%3Ccircle cx='58' cy='142' r='1'/%3E%3Ccircle cx='14' cy='109' r='1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.38;
  pointer-events: none;
}

.kknh-ring {
  box-shadow:
    0 0 0 1px rgba(31, 90, 71, 0.08),
    0 24px 70px rgba(32, 37, 43, 0.08);
}

.kknh-card {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(10px);
}

.kknh-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  border-radius: 9999px;
  border: 1px solid rgba(31, 90, 71, 0.12);
  background: rgba(255, 255, 255, 0.84);
  padding: 0.5rem 0.85rem;
}

.kknh-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(31, 90, 71, 0.2), transparent);
}

.kknh-step-line::before {
  content: "";
  position: absolute;
  left: 1.15rem;
  top: 3.3rem;
  bottom: -2.25rem;
  width: 2px;
  background: linear-gradient(180deg, rgba(47, 122, 90, 0.38), rgba(243, 201, 90, 0.2));
}

.kknh-step-line:last-child::before {
  display: none;
}

.kknh-link:hover {
  color: var(--kknh-forest);
}

.kknh-form-card[data-form-tone="green"] {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(239, 248, 244, 0.92));
}

.kknh-form-card[data-form-tone="sun"] {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(252, 246, 228, 0.94));
}

.kknh-form-card[data-form-tone="stone"] {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(244, 241, 234, 0.95));
}

.kknh-form-card[data-form-tone="leaf"] {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.93), rgba(233, 245, 238, 0.92));
}

.kknh-form-card [data-invalid="true"] {
  border-color: #e11d48;
  box-shadow: 0 0 0 4px rgba(225, 29, 72, 0.08);
}

.kknh-spinner.htmx-request {
  display: inline-flex;
}

.kknh-spinner {
  display: none;
}

.kknh-pulse {
  animation: kknhFloat 8s ease-in-out infinite;
}

@keyframes kknhFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

@media (max-width: 767px) {
  .kknh-shell::before,
  .kknh-shell::after {
    width: 15rem;
    height: 15rem;
  }
}