:root {
  --kc-cream: #fff9f2;
  --kc-surface: #ffffff;
  --kc-cocoa: #3b2a21;
  --kc-muted: #76665d;
  --kc-coral: #ff735c;
  --kc-peach: #ffe1bd;
  --kc-lavender: #e8ddf2;
  --kc-mint: #dcebdd;
  --kc-sky: #ddebf2;
  --kc-border: rgba(59, 42, 33, 0.10);
  --kc-shadow: 0 18px 45px rgba(90, 62, 44, 0.10);
  --kc-radius-sm: 16px;
  --kc-radius-md: 24px;
  --kc-radius-lg: 36px;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  background: var(--kc-cream);
  color: var(--kc-cocoa);
  font-family: Nunito, Manrope, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--kc-cocoa);
  font-family: Fredoka, Nunito, system-ui, sans-serif;
  letter-spacing: -0.02em;
}

/*
 * Keep Blocksy/WordPress skip links available to keyboard users without
 * letting their accessibility text leak into the visual layout. The link is
 * restored only while it has keyboard focus.
 */
.skip-link.show-on-focus,
.skip-link.screen-reader-text {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  z-index: 100000;
}

.skip-link.show-on-focus:focus,
.skip-link.show-on-focus:focus-visible,
.skip-link.screen-reader-text:focus,
.skip-link.screen-reader-text:focus-visible {
  top: 12px !important;
  left: 12px !important;
  width: auto !important;
  height: auto !important;
  padding: 11px 16px !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: normal !important;
  border: 2px solid var(--kc-cocoa) !important;
  border-radius: 12px;
  background: var(--kc-surface);
  color: var(--kc-cocoa);
  font-weight: 800;
  text-decoration: none;
  box-shadow: var(--kc-shadow);
}

.kc-card {
  background: var(--kc-surface);
  border: 1px solid var(--kc-border);
  border-radius: var(--kc-radius-md);
  box-shadow: var(--kc-shadow);
}

.kc-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border-radius: 999px;
  padding: 0.55rem 0.9rem;
  font-weight: 700;
}

.kc-button,
.wp-element-button {
  border: 0;
  border-radius: 999px;
  background: var(--kc-coral);
  color: #fff;
  font-weight: 800;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.kc-button:hover,
.wp-element-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(255, 115, 92, 0.28);
}

:focus-visible {
  outline: 3px solid rgba(255, 115, 92, 0.45);
  outline-offset: 3px;
}

@media (pointer: coarse) {
  .kc-button,
  .wp-element-button,
  .kc-pill,
  button,
  input[type="button"],
  input[type="submit"] {
    min-height: 44px;
  }
}

@media (prefers-contrast: more) {
  :root {
    --kc-border: rgba(59, 42, 33, 0.28);
    --kc-shadow: 0 12px 30px rgba(59, 42, 33, 0.18);
  }

  :focus-visible {
    outline-color: var(--kc-cocoa);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}