:root {
  --hibiscus-bg: #FAF6F4;
  --hibiscus-surface: #FFFFFF;
  --hibiscus-tone: #A61C3C;
  --hibiscus-tone-hover: #86142E;
  --hibiscus-ink: #262122;
  --hibiscus-gradient: linear-gradient(135deg, #A61C3C 0%, #D8315B 100%);
  --font-display: 'Montserrat', sans-serif;
  --font-body: 'Inter', sans-serif;
}

body {
  font-family: var(--font-body);
  color: var(--hibiscus-ink);
  background-color: var(--hibiscus-bg);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .brand-logotype {
  font-family: var(--font-display);
}

/* Gallery Radio Switch logic (No JavaScript) */
.gallery-selector {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
  margin: 0;
}

.gallery-slide-item {
  display: none;
}

#tea-pic-1:checked ~ .gallery-stage-holder .slide-target-1,
#tea-pic-2:checked ~ .gallery-stage-holder .slide-target-2,
#tea-pic-3:checked ~ .gallery-stage-holder .slide-target-3,
#tea-pic-4:checked ~ .gallery-stage-holder .slide-target-4 {
  display: block;
}

/* Thumbnail highlighting */
.thumb-trigger {
  border-color: #E5E7EB;
  transition: border-color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
  opacity: 0.65;
}

.thumb-trigger:hover {
  opacity: 1;
  transform: translateY(-2px);
}

#tea-pic-1:checked ~ .tea-thumbnail-track label[for="tea-pic-1"],
#tea-pic-2:checked ~ .tea-thumbnail-track label[for="tea-pic-2"],
#tea-pic-3:checked ~ .tea-thumbnail-track label[for="tea-pic-3"],
#tea-pic-4:checked ~ .tea-thumbnail-track label[for="tea-pic-4"] {
  border-color: var(--hibiscus-tone);
  opacity: 1;
  box-shadow: 0 0 0 1px var(--hibiscus-tone);
}

/* CTA Pill Button (Preset A) */
.action-pill-button {
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.action-pill-button:hover {
  background-color: var(--hibiscus-tone-hover) !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -5px rgba(166, 28, 60, 0.45);
}

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

/* Feedback cards styling (Preset A: colored left border 4px) */
.feedback-entry {
  transition: box-shadow 0.2s ease;
}

.feedback-entry:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}