@import url('https://fonts.googleapis.com/css2?family=Inspiration&display=swap');

.mykonos-theme {
    --main-color: #30A5F3;
    --switch-bg: #30A5F3;
    --switch-outline: #6DF0E1;
    --gradient-360-first: #666E94;
    --gradient-360-second: #2E3243;
    --360-border-color: rgba(255, 255, 255, 0.2);
    --360-border-color-light: #D2D2D2;
    --hand-hint-svg-bg: #323232;

    --section-avellaero-bg: url('../images/content/mykonos/appliances/avellaero_bg.webp');
    --section-appliances-grills-bg: url('../images/content/mykonos/appliances/grill-bg.webp');
    --section-appliances-stainless-bg: url('../images/content/mykonos/appliances/stainless-bg.webp');
    --section-appliances-audio-bg: url('../images/content/mykonos/appliances/entertainment_bg.webp');


    --font-heading: Inspiration;
    --font-heading-line-height: 1;
    --font-heading-size-multiplier: 1.25;


    --section-360-gradient: radial-gradient(circle at 80% 100%, var(--gradient-360-first) 0%, var(--gradient-360-second) 90%);
    --section-360-gradient-viewer: radial-gradient(circle at 80% 100%, var(--gradient-360-first) 0%, var(--gradient-360-second) 160%);

    --section-360-light: var(--white);
    --section-360-light-viewer: var(--section-360-light);
}

/* Inspiration is a connected script face with very narrow optical
   weight — main.css's unified 50px / 40px caps look especially small
   here (the original --font-heading-size-multiplier was 1.25, the
   highest of any model). Per-model caps below restore the hero-band
   prominence. Bare .section__title comes first so the _fs-70 / _fs-40
   modifier rules win via cascade order on h2s carrying both classes.
   See ~/.claude/CLAUDE.md "Display / script fonts" for the general rule. */
.mykonos-theme .section__title {
    font-size: clamp(1.5rem, 6vw, 65px);
    line-height: 1;
}

.mykonos-theme .section__title_fs-70,
.mykonos-theme .section__title-intro,
.mykonos-theme .section-trade-in .cta-title {
    font-size: clamp(1.5rem, 6.5vw, 88px);
    line-height: 1;
}

.mykonos-theme .section__title_fs-40 {
    font-size: clamp(1.5rem, 5vw, 65px);
    line-height: 1;
}