:root {
    /* Theme: HEALTH - clean, fresh, soft greens */
    --kidtea-bg: #f0fbf4; /* Soft mint background */
    --kidtea-surface: #ffffff; /* White content areas */
    --kidtea-tone: #2d8a56; /* Healthy green accent */
    --kidtea-tone-hover: #1e603b; /* Darker green for hover states */
    --kidtea-ink: #0d2b1b; /* Dark charcoal/green for readable text */
    --kidtea-gradient: linear-gradient(135deg, #e0f2e9 0%, #ffffff 100%);
    
    /* Typography */
    --font-display: 'Archivo Black', sans-serif;
    --font-body: 'Source Sans Pro', sans-serif;
    
    /* Borders & Radius - Preset Pill globally, Preset C for specific elements */
    --kidtea-radius-pill: 999px;
}

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

/* Base Headings - Uppercase styling via randomization request */
h1, h2, h3, h4, h5, h6 {
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* --- Gallery Logic (No JS) --- */
.main-steep-frame {
    aspect-ratio: 1 / 1;
}

.steep-view {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}

/* Radio button bindings for main image */
#herb-pic1:checked ~ .main-steep-frame .view-1,
#herb-pic2:checked ~ .main-steep-frame .view-2,
#herb-pic3:checked ~ .main-steep-frame .view-3,
#herb-pic4:checked ~ .main-steep-frame .view-4 {
    opacity: 1;
    z-index: 10;
}

/* Preset C: Thumbnails opacity 0.5 when inactive */
.steep-trigger {
    opacity: 0.4;
    transition: opacity 0.3s ease;
}

.steep-trigger:hover {
    opacity: 0.7;
}

/* Radio button bindings for active thumbnail */
#herb-pic1:checked ~ .thumb-steep-track label[for="herb-pic1"],
#herb-pic2:checked ~ .thumb-steep-track label[for="herb-pic2"],
#herb-pic3:checked ~ .thumb-steep-track label[for="herb-pic3"],
#herb-pic4:checked ~ .thumb-steep-track label[for="herb-pic4"] {
    opacity: 1;
}

/* --- Interactive Elements --- */
.purchase-trigger {
    display: inline-block;
    text-decoration: none;
}

.purchase-trigger:hover {
    background-color: var(--kidtea-tone-hover) !important;
    transform: translateY(-2px);
}

.legal-links a {
    color: var(--kidtea-ink);
    text-decoration: none;
}

/* Removing default outlines to maintain flat/soft design, substituting with custom focus */
a:focus, input:focus, label:focus {
    outline: 2px dashed var(--kidtea-tone);
    outline-offset: 4px;
}