:root {
  --yohim-bg: #f8fafc;
  --yohim-surface: #ffffff;
  --yohim-tone: #0284c7;
  --yohim-tone-hover: #0369a1;
  --yohim-ink: #0f172a;
  --yohim-gradient: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  --yohim-box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
  --font-display: 'Montserrat', sans-serif;
  --font-body: 'Poppins', sans-serif;
}

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

h1, h2, h3, .yohim-brand-symbol, .yohim-action-btn {
  font-family: var(--font-display);
  text-transform: uppercase;
}

/* Gallery Radio Switcher System */
.yohim-radio-trigger {
  display: none !important;
}

.yohim-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  pointer-events: none;
}

#yohim-img-1:checked ~ .yohim-display-stage .yohim-slide-1,
#yohim-img-2:checked ~ .yohim-display-stage .yohim-slide-2,
#yohim-img-3:checked ~ .yohim-display-stage .yohim-slide-3,
#yohim-img-4:checked ~ .yohim-display-stage .yohim-slide-4 {
  opacity: 1;
  pointer-events: auto;
}

/* Preset C: Thumbnail inactive state opacity 0.5 */
.yohim-thumb-item {
  opacity: 0.5;
  transition: opacity 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  border: 2px solid transparent;
}

.yohim-thumb-item:hover {
  opacity: 0.8;
}

#yohim-img-1:checked ~ .yohim-thumb-row .yohim-thumb-1,
#yohim-img-2:checked ~ .yohim-thumb-row .yohim-thumb-2,
#yohim-img-3:checked ~ .yohim-thumb-row .yohim-thumb-3,
#yohim-img-4:checked ~ .yohim-thumb-row .yohim-thumb-4 {
  opacity: 1;
  border-color: var(--yohim-tone);
  transform: translateY(-2px);
}

/* Action button hover styling */
.yohim-action-btn {
  transition: all 0.2s ease-in-out;
}

.yohim-action-btn:hover {
  background-color: var(--yohim-tone) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 20px -5px rgba(2, 132, 199, 0.3);
}