/* Theme engine — driven by CSS variables from Design Studio */



body {

    background-color: var(--color-bg);

    color: var(--color-text);

    font-family: var(--font-body);

    font-size: var(--body-size);

    font-weight: var(--body-weight);

    line-height: var(--line-height);

    -webkit-font-smoothing: antialiased;

    -moz-osx-font-smoothing: grayscale;

}



h1, h2, h3, h4, h5, h6 {

    font-family: var(--font-heading);

    font-weight: var(--heading-weight);

    letter-spacing: var(--heading-spacing);

    text-transform: var(--heading-transform);

}



h1 { font-size: clamp(2rem, 6vw, var(--heading-size)); line-height: 1.1; }



.max-w-7xl { max-width: var(--container-max) !important; }



/* Design Studio section spacing — only when padding token is explicitly py-24/py-32 (not sm:py-24) */
section[class~="py-24"],
section[class~="py-32"] {

    padding-top: var(--section-spacing) !important;

    padding-bottom: var(--section-spacing) !important;

}

@media (max-width: 640px) {

    section[class~="py-24"],
    section[class~="py-32"] {

        padding-top: clamp(3rem, 8vw, 5rem) !important;

        padding-bottom: clamp(3rem, 8vw, 5rem) !important;

    }

}



/* ── Section headers ── */

.section-header-accent {

    width: 3rem;

    height: 3px;

    margin-bottom: 1.25rem;

    border-radius: 999px;

    background: linear-gradient(90deg, var(--color-accent), color-mix(in srgb, var(--color-accent) 40%, transparent));

}

.text-center .section-header-accent { margin-left: auto; margin-right: auto; }



/* ── Premium cards ── */

.premium-card,

.feature-card,

.event-card,

.quote-card {

    background: var(--color-surface);

    border: 1px solid var(--color-border);

    border-radius: var(--radius);

    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease;

}



.card-style-elevated .premium-card,

.card-style-elevated .feature-card,

.card-style-elevated .event-card,

.card-style-elevated .quote-card,

.card-style-elevated [class*="rounded-3xl"],

.card-style-elevated .stat-card {

    box-shadow: var(--shadow-card);

}



.hover-fx-on .premium-card:hover,

.hover-fx-on .feature-card:hover,

.hover-fx-on .event-card:hover {

    transform: translateY(-6px);

    box-shadow: 0 24px 48px -12px color-mix(in srgb, var(--color-accent) 18%, transparent);

    border-color: color-mix(in srgb, var(--color-accent) 35%, var(--color-border));

}



.card-style-bordered .admin-card, .card-style-bordered [class*="rounded-3xl"].border,

.card-style-bordered .section-item { border-color: var(--color-border) !important; }



.card-style-glass [class*="rounded-3xl"],

.card-style-glass .premium-card,

.card-style-glass .feature-card {

    background: color-mix(in srgb, var(--color-surface) 75%, transparent) !important;

    backdrop-filter: blur(16px);

    -webkit-backdrop-filter: blur(16px);

}



/* Feature icon orbs */

.feature-icon {

    background: linear-gradient(135deg, color-mix(in srgb, var(--color-accent) 22%, transparent), color-mix(in srgb, var(--color-accent) 6%, transparent));

    color: var(--color-accent);

    box-shadow: inset 0 1px 0 color-mix(in srgb, white 20%, transparent);

}



/* About image frame */

.about-image-frame {

    position: relative;

}

.about-image-frame::before {

    content: '';

    position: absolute;

    inset: -12px -12px 12px 12px;

    border: 2px solid color-mix(in srgb, var(--color-accent) 40%, transparent);

    border-radius: calc(var(--radius) + 4px);

    z-index: 0;

    pointer-events: none;

}

.about-image-frame img { position: relative; z-index: 1; }



/* Quote cards */

.quote-card { position: relative; overflow: hidden; }

.quote-card::before {

    content: '\201C';

    position: absolute;

    top: 0.5rem;

    right: 1.5rem;

    font-size: 5rem;

    line-height: 1;

    font-family: var(--font-heading);

    color: color-mix(in srgb, var(--color-accent) 12%, transparent);

    pointer-events: none;

}



/* CTA band */

.cta-band {

    background: linear-gradient(135deg, var(--color-primary), color-mix(in srgb, var(--color-primary) 75%, var(--color-accent)));

    position: relative;

    overflow: hidden;

}

.cta-band::after {

    content: '';

    position: absolute;

    inset: 0;

    background: radial-gradient(ellipse at 80% 20%, color-mix(in srgb, var(--color-accent) 25%, transparent), transparent 55%);

    pointer-events: none;

}



/* Buttons */

.btn-style-solid a[class*="bg-accent"], button[class*="bg-accent"], .admin-btn-primary {

    background: var(--color-accent) !important;

    color: var(--color-button-text) !important;

}

.btn-style-solid a[class*="bg-accent"]:hover { background: var(--color-accent-hover) !important; }



.btn-style-outline a[class*="bg-accent"] {

    background: transparent !important;

    border: 2px solid var(--color-accent) !important;

    color: var(--color-accent) !important;

}



.btn-style-gradient a[class*="bg-accent"],

.btn-style-gradient .cta-band a[class*="bg-accent"] {

    background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover)) !important;

    box-shadow: 0 8px 24px -4px color-mix(in srgb, var(--color-accent) 45%, transparent);

}



.btn-style-gradient a[class*="bg-accent"]:hover {

    filter: brightness(1.08);

    transform: translateY(-2px);

}



.btn-style-soft a[class*="bg-accent"] {

    background: color-mix(in srgb, var(--color-accent) 15%, transparent) !important;

    color: var(--color-accent) !important;

}



a[class*="rounded-2xl"][class*="bg-accent"],

a[class*="rounded-xl"][class*="bg-accent"] {

    border-radius: var(--radius-button) !important;

}



.btn-shadow-yes a[class*="bg-accent"] {

    box-shadow: 0 10px 30px -8px color-mix(in srgb, var(--color-accent) 50%, transparent);

}



/* Links */

a:not([class*="bg-"]):hover { color: var(--color-link); }

.text-accent { color: var(--color-accent) !important; }

.bg-accent { background-color: var(--color-accent) !important; }

.from-primary { --tw-gradient-from: var(--color-primary) !important; }

.to-primary\/80 { --tw-gradient-to: color-mix(in srgb, var(--color-primary) 80%, transparent) !important; }



/* Surfaces */

.bg-current\/\[0\.02\] {

    background-color: color-mix(in srgb, var(--color-text) 2%, var(--color-bg)) !important;

}

.bg-accent\/5 {

    background: linear-gradient(180deg, color-mix(in srgb, var(--color-accent) 6%, var(--color-bg)), var(--color-bg)) !important;

}

.border-current\/10 { border-color: var(--color-border) !important; }



/* Hero overlay */

section#section-hero .absolute.inset-0.bg-gradient-to-r {

    background: linear-gradient(

        to right,

        color-mix(in srgb, var(--hero-overlay) calc(var(--hero-overlay-opacity) * 100%), transparent),

        color-mix(in srgb, var(--hero-overlay) calc(var(--hero-overlay-opacity) * 0.7 * 100%), transparent),

        color-mix(in srgb, var(--hero-overlay) calc(var(--hero-overlay-opacity) * 0.35 * 100%), transparent)

    ) !important;

}



.gradient-overlays-on section#section-hero::after {

    content: '';

    position: absolute;

    inset: 0;

    background: radial-gradient(ellipse at 30% 80%, color-mix(in srgb, var(--color-accent) 15%, transparent), transparent 50%);

    pointer-events: none;

    z-index: 1;

}



/* Animations off */

.animations-off [data-animate] { opacity: 1 !important; transform: none !important; transition: none !important; }

.animations-off .animate-fade-up, .animations-off .animate-float, .animations-off .animate-bounce { animation: none !important; }



/* Hover effects */

.hover-fx-on .group:hover { transition: transform 0.3s ease; }

.hover-fx-on [class*="hover:-translate-y"]:hover { transform: translateY(-4px); }



/* Navbar styles */

.nav-style-solid #navbar { background: var(--color-bg); border-bottom: 1px solid var(--color-border); }

.nav-style-blur #navbar,

.nav-style-transparent #navbar {

    background: transparent;

}

.nav-style-blur #navbar.scrolled,

.nav-style-transparent #navbar.scrolled {

    background: color-mix(in srgb, var(--color-bg) 82%, transparent);

    backdrop-filter: blur(20px);

    -webkit-backdrop-filter: blur(20px);

    border-bottom: 1px solid var(--color-border);

    box-shadow: 0 4px 30px color-mix(in srgb, var(--color-text) 6%, transparent);

}



/* Rounded elements */

[class*="rounded-3xl"] { border-radius: var(--radius) !important; }

[class*="rounded-2xl"] { border-radius: calc(var(--radius) * 0.85) !important; }

[class*="rounded-xl"] { border-radius: calc(var(--radius) * 0.7) !important; }



/* Muted text */

.opacity-60, .opacity-50, .opacity-70, .text-zinc-500 {

    color: var(--color-text-muted) !important;

    opacity: 1 !important;

}



/* Stat cards & surfaces */

.stat-card, [class*="bg-[var(--color-bg)]"] { background: var(--color-surface) !important; }



/* Gallery polish */

.gallery-item {

    box-shadow: var(--shadow-card);

    border-radius: calc(var(--radius) * 0.85) !important;

}

.gallery-item:focus-visible {

    outline: 2px solid var(--color-accent);

    outline-offset: 3px;

}



/* Selection */

::selection { background: var(--color-accent); color: var(--color-button-text); }