/* ==========================================================================
   Kiwi UI — the reusable kit (tokens + components)
   Page layout lives in site.css. Cut-out art lives in /img/kiwi/*.png.
   ========================================================================== */

:root {
  /* --- palette ------------------------------------------------------- */
  --kiwi-bg: #16180f;
  --kiwi-bg-2: #10120b;
  --kiwi-panel: #28251a;
  --kiwi-panel-2: #352d1d;
  --kiwi-brown: #5c3c25;
  --kiwi-brown-dark: #2f2117;
  --kiwi-gold: #d59a37;
  --kiwi-gold-light: #f5c95f;
  --kiwi-orange: #ff9800;
  --kiwi-green: #70963d;
  --kiwi-green-light: #9cc64d;
  --kiwi-cream: #fff3d4;
  --kiwi-blue: #199bf2;
  --kiwi-red: #ee413b;

  /* --- derived ------------------------------------------------------- */
  --kiwi-text: #f2e9d2;
  --kiwi-muted: #b7ac91;
  --kiwi-line: rgb(245 201 95 / 18%);
  --kiwi-line-strong: rgb(245 201 95 / 42%);

  /* --- shape & motion ------------------------------------------------ */
  --kiwi-radius: 14px;
  --kiwi-radius-lg: 22px;
  --kiwi-shadow: 0 10px 28px rgb(0 0 0 / 32%);
  --kiwi-shadow-lg: 0 22px 60px rgb(0 0 0 / 45%);
  --kiwi-ease: cubic-bezier(.22, .68, .32, 1);

  /* --- type ----------------------------------------------------------- */
  --kiwi-font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --kiwi-display: "Fredoka", var(--kiwi-font);

  /* --- layout --------------------------------------------------------- */
  --kiwi-wrap: 1140px;
  --kiwi-gutter: clamp(16px, 4vw, 40px);
}

/* --------------------------------------------------------------------------
   Theme surface
   -------------------------------------------------------------------------- */
.kiwi-theme {
  color: var(--kiwi-text);
  background-color: var(--kiwi-bg);
  background-image:
    radial-gradient(900px 620px at 12% -8%, rgb(245 201 95 / 11%), transparent 70%),
    radial-gradient(760px 560px at 90% 6%, rgb(112 150 61 / 12%), transparent 70%),
    radial-gradient(1100px 700px at 50% 108%, rgb(92 60 37 / 22%), transparent 72%);
  background-attachment: fixed;
}

/* A very faint film grain so the flat darks do not band. */
.kiwi-grain::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   Card
   -------------------------------------------------------------------------- */
.kiwi-card {
  position: relative;
  padding: 22px;
  border: 1px solid var(--kiwi-line);
  border-radius: var(--kiwi-radius-lg);
  background:
    linear-gradient(150deg, rgb(255 255 255 / 6%), transparent 42%),
    linear-gradient(180deg, rgb(53 45 29 / 92%), rgb(26 24 16 / 94%));
  box-shadow: inset 0 1px rgb(255 255 255 / 7%), var(--kiwi-shadow);
}

/* Pointer-tracked warm highlight. JS sets --mx/--my; harmless without it. */
.kiwi-card--lit::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s var(--kiwi-ease);
  background: radial-gradient(
    340px circle at var(--mx, 50%) var(--my, 0%),
    rgb(245 201 95 / 13%), transparent 62%);
}

.kiwi-card--lit:hover::after,
.kiwi-card--lit:focus-visible::after { opacity: 1; }

/* --------------------------------------------------------------------------
   Button
   -------------------------------------------------------------------------- */
.kiwi-button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 11px 20px;
  border: 1px solid var(--kiwi-line-strong);
  border-radius: 999px;
  color: #fff8e5;
  background-image: linear-gradient(180deg, rgb(255 255 255 / 10%), transparent 48%);
  background-color: #5f3d24;
  box-shadow: inset 0 1px rgb(255 255 255 / 12%), 0 8px 20px rgb(0 0 0 / 28%);
  font: inherit;
  font-family: var(--kiwi-display);
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s var(--kiwi-ease), border-color .18s, box-shadow .18s, background-color .18s;
}

.kiwi-button:hover {
  transform: translateY(-2px);
  border-color: var(--kiwi-gold-light);
  background-color: #6e4729;
  box-shadow:
    inset 0 1px rgb(255 255 255 / 16%),
    0 12px 28px rgb(0 0 0 / 34%),
    0 0 0 4px rgb(245 201 95 / 12%);
}

.kiwi-button:active { transform: translateY(0); }

.kiwi-button--green {
  border-color: rgb(156 198 77 / 50%);
  background-color: #5c7c31;
}
.kiwi-button--green:hover { background-color: #6b8f39; border-color: var(--kiwi-green-light); }

.kiwi-button--ghost {
  background-color: rgb(255 255 255 / 5%);
  border-color: rgb(245 201 95 / 26%);
  box-shadow: none;
}
.kiwi-button--ghost:hover { background-color: rgb(245 201 95 / 8%); box-shadow: none; }

.kiwi-button img { width: 22px; height: 22px; object-fit: contain; }

/* --------------------------------------------------------------------------
   Badge
   -------------------------------------------------------------------------- */
.kiwi-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 13px;
  border: 1px solid rgb(156 198 77 / 40%);
  border-radius: 999px;
  color: #eef6d6;
  background: rgb(78 101 44 / 34%);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .02em;
}

.kiwi-badge img { width: 16px; height: 16px; object-fit: contain; }
.kiwi-badge--gold { border-color: var(--kiwi-line-strong); color: #fdeec4; background: rgb(213 154 55 / 20%); }

/* --------------------------------------------------------------------------
   Divider
   -------------------------------------------------------------------------- */
.kiwi-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  margin: 34px 0;
}

.kiwi-divider::before,
.kiwi-divider::after {
  content: "";
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--kiwi-line-strong));
}

.kiwi-divider::after { transform: scaleX(-1); }
.kiwi-divider img { display: block; height: 30px; width: auto; opacity: .9; }

/* --------------------------------------------------------------------------
   Vine rule — the atlas border art, tiled edge to edge
   -------------------------------------------------------------------------- */
.kiwi-vine {
  height: 34px;
  border: 0;
  margin: 0;
  background: url("../img/kiwi/border-vine.png") repeat-x center / auto 100%;
  opacity: .55;
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}