:root.theme-christmas {
    --bg: #f7f2ee;
    --panel: #fff8f3;
    --card: #ffffff;
    --ink: #1a1a1a;
    --muted: #6a5e59;
    --line: #e3d4cc;
    --accent: #1f7a3f;
    --accent-dark: #155833;
    --accent-yellow: #f0c64a;
    --accent-red: #c3413d;
    --accent-soft: #e3f1e7;
    --sand: #f0e3d9;
    --shadow: 0 16px 34px rgba(40, 32, 28, 0.14);
}

html.theme-christmas,
body.theme-christmas {
    background-image:
        radial-gradient(circle at 10% 12%, rgba(255, 255, 255, 0.7) 0 2px, transparent 3px),
        radial-gradient(circle at 72% 18%, rgba(255, 255, 255, 0.55) 0 1.5px, transparent 3px),
        radial-gradient(circle at 45% 80%, rgba(255, 255, 255, 0.4) 0 1.2px, transparent 3px),
        radial-gradient(circle at 12% 12%, #ffffff 0%, #f7f2ee 55%, #ece1da 100%);
    background-size: 180px 180px, 240px 240px, 160px 160px, cover;
    background-attachment: fixed;
    background-color: var(--bg);
}

:root.theme-cny {
    --bg: #fff4ef;
    --panel: #fff8f5;
    --card: #ffffff;
    --ink: #1f0e0a;
    --muted: #5a362f;
    --line: #e7b8ad;
    --accent: #c92b2b;
    --accent-dark: #8f1b1b;
    --accent-yellow: #f2c230;
    --accent-red: #d6403a;
    --accent-soft: #ffe7e1;
    --sand: #f6e4d6;
    --shadow: 0 18px 38px rgba(120, 30, 20, 0.12);
}

html.theme-cny,
body.theme-cny {
    background-image:
        radial-gradient(circle at 12% 18%, rgba(242, 194, 48, 0.22) 0 10%, transparent 11%),
        radial-gradient(circle at 78% 28%, rgba(201, 43, 43, 0.18) 0 8%, transparent 9%),
        linear-gradient(180deg, rgba(255, 244, 239, 0.95), rgba(255, 235, 226, 0.95));
    background-size: 240px 240px, 280px 280px, cover;
    background-position: 0 0, 0 0, center;
    background-repeat: repeat, repeat, no-repeat;
    background-attachment: fixed;
    background-color: var(--bg);
}

@media (max-width: 720px) {
    html.theme-cny,
    body.theme-cny {
        background-image:
            radial-gradient(circle at 12% 18%, rgba(242, 194, 48, 0.22) 0 10%, transparent 11%),
            radial-gradient(circle at 78% 28%, rgba(201, 43, 43, 0.18) 0 8%, transparent 9%),
            linear-gradient(180deg, rgba(255, 244, 239, 0.95), rgba(255, 235, 226, 0.95));
        background-size: 200px 200px, 240px 240px, cover;
        background-position: 0 0, 0 0, center;
        background-repeat: repeat, repeat, no-repeat;
        background-attachment: scroll;
    }

    html.theme-raya,
    body.theme-raya {
        background: url("WEBSITE BACKGROUND EVENT DESIGN/HARI RAYA BACKGROUND FOR PHONE ONLY-01.jpg") center top / contain no-repeat scroll;
        background-color: var(--bg);
    }
}

:root.theme-raya {
    --bg: #f1f7f3;
    --panel: #f7fbf8;
    --card: #ffffff;
    --ink: #163025;
    --muted: #4f6a5b;
    --line: #d7e4db;
    --accent: #1d7a5a;
    --accent-dark: #14543f;
    --accent-yellow: #c8a44a;
    --accent-red: #d76a5a;
    --accent-soft: #dff2e7;
    --sand: #e6efe9;
    --shadow: 0 16px 36px rgba(18, 60, 45, 0.12);
}

html.theme-raya,
body.theme-raya {
    background-image:
        linear-gradient(180deg, rgba(241, 247, 243, 0.18), rgba(241, 247, 243, 0.18)),
        url("WEBSITE BACKGROUND EVENT DESIGN/HARI RAYA BACKGROUND-02.jpg");
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-color: var(--bg);
}

.theme-christmas .site-header,
.theme-cny .site-header,
.theme-raya .site-header {
    border-bottom-color: var(--line);
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.85));
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}

.theme-christmas .site-header {
    background: linear-gradient(120deg, rgba(31, 122, 63, 0.08), rgba(195, 65, 61, 0.06)), rgba(255, 255, 255, 0.92);
}

.theme-cny .site-header {
    background: linear-gradient(120deg, rgba(201, 43, 43, 0.12), rgba(242, 194, 48, 0.08)), rgba(255, 255, 255, 0.92);
}

.theme-raya .site-header {
    background: linear-gradient(120deg, rgba(29, 122, 90, 0.12), rgba(200, 164, 74, 0.1)), rgba(255, 255, 255, 0.92);
}

.theme-cny .main-nav a {
    color: var(--muted);
}

.theme-cny .main-nav a.active,
.theme-cny .main-nav a:hover {
    color: var(--ink);
}

.theme-christmas .site-footer,
.theme-cny .site-footer,
.theme-raya .site-footer {
    background: rgba(12, 12, 13, 0.76);
    backdrop-filter: blur(6px);
}

.theme-cny .section-head strong,
.theme-cny .section-head span {
    color: #ffffff;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.theme-cny .sidebar-section-label {
    color: #ffffff;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.theme-raya .section-head strong,
.theme-raya .section-head span,
.theme-raya .premium-title,
.theme-raya .sidebar-section-label,
.theme-raya .thread-hero .hero-text h1,
.theme-raya .thread-hero .hero-text p,
.theme-raya .thread-hero .breadcrumb {
    color: #ffffff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.main-nav .nav-home-raya,
.main-nav .nav-home-cny {
    display: none;
}

.theme-raya .main-nav .nav-home-default {
    display: none;
}

.theme-raya .main-nav .nav-home-raya {
    display: inline;
    font-family: 'Great Vibes', 'Times New Roman', cursive;
    font-weight: 400;
    font-size: clamp(26px, 3.2vw + 12px, 42px);
    line-height: 1.1;
    letter-spacing: 0.01em;
    color: #0f6a42;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    text-transform: none;
    white-space: nowrap;
}

.theme-cny .main-nav .nav-home-default {
    display: none;
}

.theme-cny .main-nav .nav-home-cny {
    display: inline;
    font-family: 'ZCOOL QingKe HuangYou', 'Noto Sans SC', sans-serif;
    font-weight: 600;
    font-size: clamp(36px, 4.6vw + 14px, 62px);
    line-height: 1.1;
    letter-spacing: 0.32em;
    color: #e21b2f;
    text-shadow: none;
    text-transform: none;
    white-space: nowrap;
}

@media (max-width: 720px) {
    html.theme-raya,
    body.theme-raya {
        background-image: url("WEBSITE BACKGROUND EVENT DESIGN/HARI RAYA BACKGROUND FOR PHONE ONLY-01.jpg") !important;
        background-size: cover !important;
        background-position: 70% bottom !important;
        background-repeat: no-repeat !important;
        background-attachment: scroll !important;
        background-color: var(--bg) !important;
    }
}