:root {
  --relieva-bg: #f0f8ff;
  --relieva-surface: #ffffff;
  --relieva-tone: #20b2aa;
  --relieva-tone-hover: #008b8b;
  --relieva-ink: #2f4f4f;
  --relieva-gradient: linear-gradient(135deg, #e0ffff 0%, #f0f8ff 100%);
  --relieva-radius: 999px;
  
  --font-display: 'Archivo Black', sans-serif;
  --font-body: 'Mulish', sans-serif;
}

/* Base Reset & Enforcement for Flat Shadows (shadow-depth: flat) */
* {
  box-shadow: none !important;
}

body {
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

/* Gallery Interactivity */
.rel-slide {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
  z-index: 1;
}
.relieva-main-view {
  padding-bottom: 100%;
}

/* Show slide based on checked radio */
#rel-pic-1:checked ~ .relieva-main-view .rel-slide-1,
#rel-pic-2:checked ~ .relieva-main-view .rel-slide-2,
#rel-pic-3:checked ~ .relieva-main-view .rel-slide-3,
#rel-pic-4:checked ~ .relieva-main-view .rel-slide-4 {
  opacity: 1;
  visibility: visible;
  z-index: 10;
}

/* Design Preset C: Thumbnails opacity 0.5 on inactive */
.rel-thumb {
  opacity: 0.5;
  transition: opacity 0.3s ease, transform 0.2s ease;
}

.rel-thumb:hover {
  opacity: 0.8;
}

#rel-pic-1:checked ~ .relieva-thumb-strip .rel-thumb-1,
#rel-pic-2:checked ~ .relieva-thumb-strip .rel-thumb-2,
#rel-pic-3:checked ~ .relieva-thumb-strip .rel-thumb-3,
#rel-pic-4:checked ~ .relieva-thumb-strip .rel-thumb-4 {
  opacity: 1;
  transform: scale(1.05);
}

/* CTA Button Interaction */
.relieva-action-btn:hover {
  background-color: var(--relieva-bg) !important;
  color: var(--relieva-tone-hover) !important;
  border-left-color: var(--relieva-tone-hover) !important;
}