/* Variables Setup - LIGHT Theme, Action Blue Accent */
:root {
    --flex-supp-bg: #FFFFFF;
    --flex-supp-surface: #F9FAFB;
    --flex-supp-tone: #0284C7; /* Athletic Blue */
    --flex-supp-tone-hover: #0369A1;
    --flex-supp-ink: #1F2937;
    --flex-supp-ink-light: #4B5563;
    
    /* Font selections based on parameters */
    --font-display: 'Montserrat', sans-serif;
    --font-body: 'Open Sans', sans-serif;
}

/* Base resets */
html, body {
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Gallery Logic (CSS Only) */
.flex-supp-slide {
    display: none;
    aspect-ratio: 1 / 1;
    background-color: var(--flex-supp-bg);
}

/* Show slide based on checked radio */
#frame1:checked ~ .flex-supp-main-lens .slide1,
#frame2:checked ~ .flex-supp-main-lens .slide2,
#frame3:checked ~ .flex-supp-main-lens .slide3,
#frame4:checked ~ .flex-supp-main-lens .slide4 {
    display: block;
}

/* Thumbnail Active State Styling */
#frame1:checked ~ .flex-supp-thumb-rack label[for="frame1"],
#frame2:checked ~ .flex-supp-thumb-rack label[for="frame2"],
#frame3:checked ~ .flex-supp-thumb-rack label[for="frame3"],
#frame4:checked ~ .flex-supp-thumb-rack label[for="frame4"] {
    border-color: var(--flex-supp-tone);
    opacity: 1;
    box-shadow: 0 0 0 1px var(--flex-supp-tone);
}

.flex-supp-thumb-rack label {
    opacity: 0.6;
}
.flex-supp-thumb-rack label:hover {
    opacity: 0.9;
}

/* CTA Hover Effect (Preset A pill + shadow) */
.flex-supp-purchase-trigger {
    box-shadow: 0 4px 6px -1px rgba(2, 132, 199, 0.4), 0 2px 4px -1px rgba(2, 132, 199, 0.2);
}

.flex-supp-purchase-trigger:hover {
    background-color: var(--flex-supp-tone-hover) !important;
    box-shadow: 0 10px 15px -3px rgba(2, 132, 199, 0.5), 0 4px 6px -2px rgba(2, 132, 199, 0.3);
    transform: translateY(-2px);
}

/* Raised shadows for elements to fulfill depth parameter */
.flex-supp-insight-item {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}