/* ==========================================================
   HEADER / FOOTER COLOR SYSTEM
========================================================== */

.site-header,
.site-footer {
    --surface-bg: transparent;
    --surface-text: currentColor;

    --nav-hover-bg: rgba(255, 255, 255, .24);
    --nav-hover-text: currentColor;
    --nav-active-bg: rgba(255, 255, 255, .68);
    --nav-active-text: currentColor;
    --nav-focus-bg: rgba(255, 255, 255, .9);
    --nav-focus-text: currentColor;
    --nav-focus-outline: currentColor;

    --social-bg: rgba(255, 255, 255, .18);
    --social-text: currentColor;
    --social-hover-bg: rgba(255, 255, 255, .32);
    --social-hover-text: currentColor;

    --divider-color: rgba(255, 255, 255, .22);
    --quote-symbol-color: currentColor;
    --quote-text-color: currentColor;
    --copyright-text-color: currentColor;

    --credit-text-color: currentColor;
    --credit-link-color: currentColor;
    --credit-link-hover-text: currentColor;
    --credit-focus-bg: rgba(255, 255, 255, .18);
    --credit-focus-text: currentColor;
    --credit-focus-outline: currentColor;

    --overlay-bg: var(--surface-bg);
    --overlay-text: var(--surface-text);

    background: var(--surface-bg);
    color: var(--surface-text);
}

/* ==========================================================
   VARIANTS
========================================================== */

/* ==========================================================
   WARM EDITORIAL (ROSA)
========================================================== */

.site-header.is-style-header-warm-editorial,
.site-footer.is-style-footer-warm-editorial {

    /* ======================================================
       TONE SYSTEM
    ====================================================== */

    --tone-bg-soft: #FADCE2;
    --tone-bg-strong: #77112d;

    --tone-text: #77112d;
    --tone-text-strong: #4d0a1c;
    --tone-text-inverse: #ffffff;

    --tone-accent: #C94F74;
    --tone-accent-soft: rgba(255, 255, 255, .38);

    --tone-border: rgba(119, 17, 45, .18);

    --tone-focus: #77112d;

    --tone-focus-shadow:
        0 0 0 6px rgba(119, 17, 45, .18);
}

/* ---------- HEADER ---------- */

.site-header.is-style-header-warm-editorial {

    --surface-bg: var(--tone-bg-soft);
    --surface-text: var(--tone-text);

    --nav-hover-bg: var(--tone-accent-soft);
    --nav-hover-text: #5e0d24;

    --nav-active-bg: rgba(255, 255, 255, .72);
    --nav-active-text: var(--tone-text);

    --nav-focus-bg: rgba(255, 255, 255, .92);
    --nav-focus-text: var(--tone-text-strong);
    --nav-focus-outline: var(--tone-focus);

    --social-bg: rgba(119, 17, 45, .10);
    --social-text: var(--tone-text);

    --social-hover-bg: rgba(119, 17, 45, .18);
    --social-hover-text: #5e0d24;

    --divider-color: var(--tone-border);
}

/* ---------- OVERLAY ---------- */

.site-header.is-style-header-warm-editorial {

    --overlay-bg: #FFF3F6;
    --overlay-text: #77112d;

    --overlay-nav-bg: rgba(255, 255, 255, .92);
    --overlay-nav-text: #77112d;

    --overlay-nav-hover-bg: #C94F74;
    --overlay-nav-hover-text: #ffffff;

    --overlay-nav-active-bg: #77112d;
    --overlay-nav-active-text: #ffffff;

    --overlay-nav-focus-bg: #ffffff;
    --overlay-nav-focus-text: #4d0a1c;

    --overlay-focus-outline: #C94F74;

    --overlay-focus-shadow:
        0 0 0 6px rgba(201, 79, 116, .18);

    --overlay-divider: rgba(119, 17, 45, .12);

    --overlay-social-bg: rgba(255, 255, 255, .92);
    --overlay-social-text: #77112d;

    --overlay-social-hover-bg: #C94F74;
    --overlay-social-hover-text: #ffffff;

    --overlay-toggle-bg: rgba(255, 255, 255, .78);
    --overlay-toggle-text: #77112d;

    --overlay-toggle-hover-bg: #C94F74;
    --overlay-toggle-hover-text: #ffffff;

    --overlay-close-bg: rgba(255, 255, 255, .92);
    --overlay-close-text: #77112d;

    --overlay-close-hover-bg: #77112d;
    --overlay-close-hover-text: #ffffff;
}

/* ---------- FOOTER ---------- */

.site-footer.is-style-footer-warm-editorial {

    --surface-bg:
        linear-gradient(135deg,
            #5e0d24,
            #77112d);

    --surface-text: #FCEFF3;

    --nav-hover-bg: rgba(255, 255, 255, .12);
    --nav-hover-text: #ffffff;

    --nav-active-bg: #FADCE2;
    --nav-active-text: #77112d;

    --nav-focus-bg: rgba(250, 220, 226, .22);
    --nav-focus-text: #ffffff;
    --nav-focus-outline: #FADCE2;

    --social-bg: rgba(250, 220, 226, .14);
    --social-text: #FADCE2;

    --social-hover-bg: rgba(250, 220, 226, .24);
    --social-hover-text: #ffffff;

    --divider-color: rgba(250, 220, 226, .24);
    --footer-divider-gradient:
        linear-gradient(90deg,
            transparent,
            rgba(250, 220, 226, .18) 10%,
            rgba(250, 220, 226, .95) 45%,
            rgba(255, 255, 255, .95) 50%,
            rgba(250, 220, 226, .75) 55%,
            rgba(250, 220, 226, .18) 90%,
            transparent);

    --footer-divider-shadow:
        0 0 12px rgba(250, 220, 226, .28),
        0 0 22px rgba(250, 220, 226, .16);

    --footer-divider-glow:
        radial-gradient(ellipse at center,
            rgba(250, 220, 226, .22),
            transparent 72%);

    --quote-symbol-color: #FADCE2;
    --quote-text-color: rgba(252, 239, 243, .88);

    --copyright-text-color: rgba(252, 239, 243, .62);

    --credit-text-color: rgba(252, 239, 243, .72);

    --credit-link-color: #FADCE2;
    --credit-link-hover-text: #ffffff;

    --credit-focus-bg: rgba(250, 220, 226, .18);
    --credit-focus-text: #ffffff;
    --credit-focus-outline: #FADCE2;
}


/* ==========================================================
   TEAL DREAM (TÜRKIS)
========================================================== */

.site-header.is-style-header-teal-dream,
.site-footer.is-style-footer-teal-dream {

    /* ======================================================
       TONE SYSTEM
    ====================================================== */

    --tone-bg-soft: #C0DAC8;
    --tone-bg-strong: #255F5A;

    --tone-text: #255F5A;
    --tone-text-strong: #183B38;
    --tone-text-inverse: #ffffff;

    --tone-accent: #3B9189;
    --tone-accent-soft: rgba(255, 255, 255, .32);

    --tone-border: rgba(37, 95, 90, .16);

    --tone-focus: #3B9189;

    --tone-focus-shadow:
        0 0 0 6px rgba(59, 145, 137, .18);
}

/* ---------- HEADER ---------- */

.site-header.is-style-header-teal-dream {

    --surface-bg: var(--tone-bg-soft);
    --surface-text: var(--tone-text);

    --nav-hover-bg: var(--tone-accent-soft);
    --nav-hover-text: #1E4B47;

    --nav-active-bg: rgba(255, 255, 255, .68);
    --nav-active-text: var(--tone-text);

    --nav-focus-bg: rgba(255, 255, 255, .9);
    --nav-focus-text: var(--tone-text-strong);
    --nav-focus-outline: var(--tone-focus);

    --social-bg: rgba(59, 145, 137, .14);
    --social-text: var(--tone-text);

    --social-hover-bg: rgba(59, 145, 137, .22);
    --social-hover-text: #183B38;

    --divider-color: var(--tone-border);
}

/* ---------- OVERLAY ---------- */

.site-header.is-style-header-teal-dream {

    --overlay-bg: #F2FAF7;
    --overlay-text: #255F5A;

    --overlay-nav-bg: rgba(255, 255, 255, .92);
    --overlay-nav-text: #255F5A;

    --overlay-nav-hover-bg: #3B9189;
    --overlay-nav-hover-text: #ffffff;

    --overlay-nav-active-bg: #255F5A;
    --overlay-nav-active-text: #ffffff;

    --overlay-nav-focus-bg: #ffffff;
    --overlay-nav-focus-text: #183B38;

    --overlay-focus-outline: #3B9189;

    --overlay-focus-shadow:
        0 0 0 6px rgba(59, 145, 137, .18);

    --overlay-divider: rgba(37, 95, 90, .10);

    --overlay-social-bg: rgba(255, 255, 255, .92);
    --overlay-social-text: #255F5A;

    --overlay-social-hover-bg: #3B9189;
    --overlay-social-hover-text: #ffffff;

    --overlay-toggle-bg: rgba(255, 255, 255, .82);
    --overlay-toggle-text: #255F5A;

    --overlay-toggle-hover-bg: #3B9189;
    --overlay-toggle-hover-text: #ffffff;

    --overlay-close-bg: rgba(255, 255, 255, .92);
    --overlay-close-text: #255F5A;

    --overlay-close-hover-bg: #255F5A;
    --overlay-close-hover-text: #ffffff;
}

/* ---------- FOOTER ---------- */

.site-footer.is-style-footer-teal-dream {

    --surface-bg:
        linear-gradient(135deg,
            #1F4D49,
            #3B9189);

    --surface-text: #F4FAF6;

    --nav-hover-bg: rgba(255, 255, 255, .12);
    --nav-hover-text: #ffffff;

    --nav-active-bg: #C0DAC8;
    --nav-active-text: #255F5A;

    --nav-focus-bg: rgba(192, 218, 200, .22);
    --nav-focus-text: #ffffff;
    --nav-focus-outline: #C0DAC8;

    --social-bg: rgba(192, 218, 200, .16);
    --social-text: #C0DAC8;

    --social-hover-bg: rgba(192, 218, 200, .26);
    --social-hover-text: #ffffff;

    --divider-color: rgba(192, 218, 200, .25);
    --footer-divider-gradient:
        linear-gradient(90deg,
            transparent,
            rgba(192, 218, 200, .18) 10%,
            rgba(192, 218, 200, .95) 45%,
            rgba(255, 255, 255, .95) 50%,
            rgba(59, 145, 137, .75) 55%,
            rgba(192, 218, 200, .18) 90%,
            transparent);

    --footer-divider-shadow:
        0 0 12px rgba(192, 218, 200, .24),
        0 0 22px rgba(59, 145, 137, .16);

    --footer-divider-glow:
        radial-gradient(ellipse at center,
            rgba(192, 218, 200, .2),
            rgba(59, 145, 137, .12) 45%,
            transparent 72%);

    --quote-symbol-color: #C0DAC8;
    --quote-text-color: rgba(244, 250, 246, .86);

    --copyright-text-color: rgba(244, 250, 246, .58);

    --credit-text-color: rgba(244, 250, 246, .66);

    --credit-link-color: #C0DAC8;
    --credit-link-hover-text: #ffffff;

    --credit-focus-bg: rgba(192, 218, 200, .16);
    --credit-focus-text: #ffffff;
    --credit-focus-outline: #C0DAC8;
}


/* ==========================================================
   SUNSET GLOW (ORANGE)
========================================================== */

.site-header.is-style-header-sunset-glow,
.site-footer.is-style-footer-sunset-glow {

    /* ======================================================
       TONE SYSTEM
    ====================================================== */

    --tone-bg-soft: #FBE7D3;
    --tone-bg-strong: #5C2400;

    --tone-text: #5C2400;
    --tone-text-strong: #3A1400;
    --tone-text-inverse: #ffffff;

    --tone-accent: #F69139;
    --tone-accent-soft: rgba(255, 255, 255, .28);

    --tone-border: rgba(92, 36, 0, .16);

    --tone-focus: #F69139;

    --tone-focus-shadow:
        0 0 0 6px rgba(246, 145, 57, .18);
}

/* ---------- HEADER ---------- */

.site-header.is-style-header-sunset-glow {

    --surface-bg: var(--tone-bg-soft);
    --surface-text: var(--tone-text);

    --nav-hover-bg: var(--tone-accent-soft);
    --nav-hover-text: #4A1C00;

    --nav-active-bg: rgba(255, 255, 255, .68);
    --nav-active-text: var(--tone-text);

    --nav-focus-bg: rgba(255, 255, 255, .92);
    --nav-focus-text: var(--tone-text-strong);
    --nav-focus-outline: var(--tone-focus);

    --social-bg: rgba(255, 255, 255, .18);
    --social-text: var(--tone-text);

    --social-hover-bg: rgba(255, 255, 255, .34);
    --social-hover-text: #3A1400;

    --divider-color: var(--tone-border);
}

/* ---------- OVERLAY ---------- */

.site-header.is-style-header-sunset-glow {

    --overlay-bg: #FFF6EC;
    --overlay-text: #5C2400;

    --overlay-nav-bg: rgba(255, 255, 255, .92);
    --overlay-nav-text: #5C2400;

    --overlay-nav-hover-bg: #F69139;
    --overlay-nav-hover-text: #ffffff;

    --overlay-nav-active-bg: #5C2400;
    --overlay-nav-active-text: #ffffff;

    --overlay-nav-focus-bg: #ffffff;
    --overlay-nav-focus-text: #3A1400;

    --overlay-focus-outline: #F69139;

    --overlay-focus-shadow:
        0 0 0 6px rgba(246, 145, 57, .18);

    --overlay-divider: rgba(92, 36, 0, .10);

    --overlay-social-bg: rgba(255, 255, 255, .92);
    --overlay-social-text: #5C2400;

    --overlay-social-hover-bg: #F69139;
    --overlay-social-hover-text: #ffffff;

    --overlay-toggle-bg: rgba(255, 255, 255, .82);
    --overlay-toggle-text: #5C2400;

    --overlay-toggle-hover-bg: #F69139;
    --overlay-toggle-hover-text: #ffffff;

    --overlay-close-bg: rgba(255, 255, 255, .92);
    --overlay-close-text: #5C2400;

    --overlay-close-hover-bg: #5C2400;
    --overlay-close-hover-text: #ffffff;
}

/* ---------- FOOTER ---------- */

.site-footer.is-style-footer-sunset-glow {

    --surface-bg:
        linear-gradient(135deg,
            #6E2D00,
            #F69139);

    --surface-text: #FFF6EE;

    --nav-hover-bg: rgba(255, 255, 255, .12);
    --nav-hover-text: #ffffff;

    --nav-active-bg: rgba(255, 255, 255, .82);
    --nav-active-text: #6E2D00;

    --nav-focus-bg: rgba(255, 212, 168, .18);
    --nav-focus-text: #ffffff;
    --nav-focus-outline: #FFD4A8;

    --social-bg: rgba(255, 255, 255, .18);
    --social-text: #FFD4A8;

    --social-hover-bg: rgba(255, 255, 255, .32);
    --social-hover-text: #ffffff;

    --divider-color: rgba(255, 212, 168, .28);
    --footer-divider-gradient:
        linear-gradient(90deg,
            transparent,
            rgba(255, 212, 168, .18) 10%,
            rgba(255, 212, 168, .95) 45%,
            rgba(255, 255, 255, .95) 50%,
            rgba(246, 145, 57, .75) 55%,
            rgba(255, 212, 168, .18) 90%,
            transparent);

    --footer-divider-shadow:
        0 0 12px rgba(255, 212, 168, .28),
        0 0 22px rgba(246, 145, 57, .18);

    --footer-divider-glow:
        radial-gradient(ellipse at center,
            rgba(255, 212, 168, .22),
            rgba(246, 145, 57, .12) 45%,
            transparent 72%);

    --quote-symbol-color: #FFD4A8;
    --quote-text-color: rgba(255, 246, 238, .9);

    --copyright-text-color: rgba(255, 246, 238, .62);

    --credit-text-color: rgba(255, 246, 238, .7);

    --credit-link-color: #FFD4A8;
    --credit-link-hover-text: #ffffff;

    --credit-focus-bg: rgba(255, 212, 168, .16);
    --credit-focus-text: #ffffff;
    --credit-focus-outline: #FFD4A8;
}