/* Theme definitions: combine a theme name (data-theme) with a mode (data-theme-mode) so adding new themes is easy */

/* ===========================
   Default Theme
   =========================== */
/* Default theme (dark) */
.default-dark,
[data-theme="default"][data-theme-mode="dark"] {
    --color-primary: #837dff;
    --color-secondary: #a291d7;
    --color-accent: #371296;
    --color-highlight: #7e2872;

    --color-bg-primary: #0D1117;
    --color-bg-secondary: #161B22;
    --color-bg-tertiary: #21262D;

    --color-card-bg: rgba(22, 27, 34, 0.6);
    --color-card-border: rgba(48, 54, 61, 0.6);

    --color-text-primary: white;
    --color-text-secondary: rgba(179, 158, 255, 0.75);
    --color-text-muted: rgba(255, 255, 255, 0.6);

    --color-header-bg: rgba(13, 17, 23, 0.85);
    --color-border: rgba(48, 54, 61, 0.6);

    --gradient-hero-1: rgba(17, 16, 40, 0.3);
    --gradient-hero-2: rgba(6, 35, 84, 0.2);
    --gradient-hero-3: rgba(50, 18, 122, 0.15);
}

.default-dark .hero::before {
    background-image: url('/images/themes/default-dark.jpg');
    background-position: center top;
    background-size: cover;
    filter: brightness(0.5);
}

/* Default theme (light) */
.default-light,
[data-theme="default"][data-theme-mode="light"] {
    --color-primary: #5d56df;
    --color-secondary: #6b8dc0;
    --color-accent: #160245;
    --color-highlight: #68005c;

    --color-bg-primary: #FFFFFF;
    --color-bg-secondary: #F6F8FA;
    --color-bg-tertiary: #EAEEF2;

    --color-card-bg: #FFFFFF;
    --color-card-border: rgba(27, 31, 36, 0.15);

    --color-text-primary: #1F2937;
    --color-text-secondary: #4B5563;
    --color-text-muted: #6B7280;

    --color-header-bg: rgba(255, 255, 255, 0.85);
    --color-border: rgba(27, 31, 36, 0.15);

    --gradient-hero-1: rgba(17, 16, 40, 0.06);
    --gradient-hero-2: rgba(6, 35, 84, 0.05);
    --gradient-hero-3: rgba(50, 18, 122, 0.04);
}

.default-light .hero {
    background-image: url('/images/themes/default-light.jpg');
    background-position: center center;
    background-size: cover;
}

/* ===========================
   Fujisaki Theme
   =========================== */
.fujisaki-light,
[data-theme="fujisaki"][data-theme-mode="light"] {
    --color-primary: #affc03;
    --color-secondary: #b2d893;
    --color-accent: #8cc302;
    --color-highlight: #c5e2a9;
    --color-bg-primary: #f5f5f0;
    --color-bg-secondary: #ffffff;
    --color-bg-tertiary: #f9f9f7;
    --color-card-bg: #f5f5f0;
    --color-card-border: rgba(42, 46, 21, 0.15);
    --color-text-primary: #2a2e15;
    --color-text-secondary: rgba(42, 46, 21, 0.75);
    --color-text-muted: rgba(42, 46, 21, 0.6);
    --color-header-bg: rgba(245, 245, 240, 0.85);
    --color-border: rgba(42, 46, 21, 0.15);
    --gradient-hero-1: rgba(175, 252, 3, 0.1);
    --gradient-hero-2: rgba(178, 216, 147, 0.08);
    --gradient-hero-3: rgba(140, 195, 2, 0.06);
}

.fujisaki-light .hero {
    background-image: url('/images/themes/fujisaki-light.webp');
    background-position: center right;
    background-size: cover;
}

.fujisaki-dark,
[data-theme="fujisaki"][data-theme-mode="dark"] {
    --color-primary: #affc03;
    --color-secondary: #b2d893;
    --color-accent: #8cc302;
    --color-highlight: #c5e2a9;
    --color-bg-primary: #2a2e15;
    --color-bg-secondary: #4A752C;
    --color-bg-tertiary: #416226;
    --color-card-bg: rgba(74, 117, 44, 0.6);
    --color-card-border: rgba(163, 217, 119, 0.2);
    --color-text-primary: #A3D977;
    --color-text-secondary: rgba(163, 217, 119, 0.75);
    --color-text-muted: rgba(163, 217, 119, 0.6);
    --color-header-bg: rgba(42, 46, 21, 0.85);
    --color-border: rgba(163, 217, 119, 0.2);
    --gradient-hero-1: rgba(175, 252, 3, 0.3);
    --gradient-hero-2: rgba(178, 216, 147, 0.2);
    --gradient-hero-3: rgba(140, 195, 2, 0.15);
}

.fujisaki-dark .hero::before {
    background-image: url('/icons/themes/fujisaki/fujisaki-dark.jpg');
    background-position: center;
    background-size: cover;
    filter: brightness(0.5);
}

/* ===========================
   Sayori Theme
   =========================== */
.sayori-light,
[data-theme="sayori"][data-theme-mode="light"] {
    --color-primary: #e5263d;
    --color-secondary: #e05a5f;
    --color-accent: #c7016b;
    --color-highlight: #f1a7f1;
    --color-bg-primary: #FFFFFF;
    --color-bg-secondary: #F6F8FA;
    --color-bg-tertiary: #b7cfe9;
    --color-card-bg: #e5e7ee;
    --color-card-border: rgba(142, 164, 211, 0.15);
    --color-text-primary: #010d1a;
    --color-text-secondary: #830b2f;
    --color-text-muted: rgba(55, 76, 122, 0.6);
    --color-header-bg: rgba(86, 120, 192, 0.685);
    --color-border: rgba(55, 76, 122, 0.15);
    --gradient-hero-1: rgba(239, 75, 162, 0.1);
    --gradient-hero-2: rgba(252, 179, 255, 0.08);
    --gradient-hero-3: rgba(159, 1, 86, 0.06);
}

.sayori-light .hero {
    background-image: url('/images/themes/sayori-light.png');
    background-position: left;
    background-size: cover;
}

.sayori-dark,
[data-theme="sayori"][data-theme-mode="dark"] {
    --color-primary: #c7016b;
    --color-secondary: #fcb3ff;
    --color-accent: #9f0156;
    --color-highlight: #ffd1ff;
    --color-bg-primary: #1a2233;
    --color-bg-secondary: #101520;
    --color-bg-tertiary: #131826;
    --color-card-bg: rgba(16, 21, 32, 0.6);
    --color-card-border: rgba(242, 185, 244, 0.2);
    --color-text-primary: #f2b9f4;
    --color-text-secondary: rgba(242, 185, 244, 0.75);
    --color-text-muted: rgba(242, 185, 244, 0.6);
    --color-header-bg: rgba(26, 34, 51, 0.85);
    --color-border: rgba(242, 185, 244, 0.2);
    --gradient-hero-1: rgba(199, 1, 107, 0.3);
    --gradient-hero-2: rgba(252, 179, 255, 0.2);
    --gradient-hero-3: rgba(159, 1, 86, 0.15);
}

.sayori-dark .hero::before {
    background-image: url('/images/themes/sayori-dark.jpg');
    background-position: left center;
    background-size: cover;
    filter: brightness(0.5);
}

/* ===========================
   Natsuki Theme
   =========================== */
.natsuki-light,
[data-theme="natsuki"][data-theme-mode="light"] {
    --color-primary: #a11d5d;
    --color-secondary: #e5538a;
    --color-accent: #7a1646;
    --color-highlight: #e199eb;
    --color-bg-primary: #ffd6ef;
    --color-bg-secondary: #fed6ff;
    --color-bg-tertiary: #fee2fa;
    --color-card-bg: #ffb0db;
    --color-card-border: rgba(103, 40, 65, 0.15);
    --color-text-primary: #672841;
    --color-text-secondary: rgba(103, 40, 65, 0.75);
    --color-text-muted: rgba(103, 40, 65, 0.6);
    --color-header-bg: rgba(255, 176, 219, 0.85);
    --color-border: rgba(103, 40, 65, 0.15);
    --gradient-hero-1: rgba(161, 29, 93, 0.1);
    --gradient-hero-2: rgba(215, 120, 226, 0.08);
    --gradient-hero-3: rgba(122, 22, 70, 0.06);
}

.natsuki-light .hero {
    background-image: url('/images/themes/natsuki-light.jpg');
    background-position: top center;
}

.natsuki-dark,
[data-theme="natsuki"][data-theme-mode="dark"] {
    --color-primary: #a11d5d;
    --color-secondary: #e5538a;
    --color-accent: #7a1646;
    --color-highlight: #e199eb;
    --color-bg-primary: #331420;
    --color-bg-secondary: #29101a;
    --color-bg-tertiary: #2d121d;
    --color-card-bg: rgba(41, 16, 26, 0.6);
    --color-card-border: rgba(255, 176, 219, 0.2);
    --color-text-primary: #ffb0db;
    --color-text-secondary: rgba(255, 176, 219, 0.75);
    --color-text-muted: rgba(255, 176, 219, 0.6);
    --color-header-bg: rgba(51, 20, 32, 0.85);
    --color-border: rgba(255, 176, 219, 0.2);
    --gradient-hero-1: rgba(161, 29, 93, 0.3);
    --gradient-hero-2: rgba(215, 120, 226, 0.2);
    --gradient-hero-3: rgba(122, 22, 70, 0.15);
}

.natsuki-dark .hero::before {
    background-image: url('/images/themes/natsuki-dark.jpg');
    background-position: top;
    background-size: cover;
    filter: brightness(0.5);
}


/* ===========================
   Miku Theme
   =========================== */
.miku-light,
[data-theme="miku"][data-theme-mode="light"] {
    --color-primary: #1A7F82;
    --color-secondary: #556869;
    --color-accent: #135e60;
    --color-highlight: #7c8a8b;
    --color-bg-primary: #eaf2f2;
    --color-bg-secondary: #ffffff;
    --color-bg-tertiary: #f2f5f5;
    --color-card-bg: #eaf2f2;
    --color-card-border: rgba(44, 62, 80, 0.15);
    --color-text-primary: #2c3e50;
    --color-text-secondary: rgba(44, 62, 80, 0.75);
    --color-text-muted: rgba(44, 62, 80, 0.6);
    --color-header-bg: rgba(234, 242, 242, 0.85);
    --color-border: rgba(44, 62, 80, 0.15);
    --gradient-hero-1: rgba(26, 127, 130, 0.1);
    --gradient-hero-2: rgba(85, 104, 105, 0.08);
    --gradient-hero-3: rgba(19, 94, 96, 0.06);
}

.miku-light .hero {
    background-image: url('/icons/themes/miku/miku-light.jpg');
    background-position: center;
    background-size: cover;
}

.miku-dark,
[data-theme="miku"][data-theme-mode="dark"] {
    --color-primary: #8fcace;
    --color-secondary: #6bbabe;
    --color-accent: #29a6b7;
    --color-highlight: #a8f9ff;
    --color-bg-primary: #2c3e50;
    --color-bg-secondary: #1a7f8274;
    --color-bg-tertiary: #206c6e;
    --color-card-bg: rgba(43, 147, 150, 0.646);
    --color-card-border: rgba(43, 219, 207, 0.598);
    --color-text-primary: white;
    /*#39C5BB;*/
    --color-text-secondary: #70efe6;
    --color-text-muted: #33bbb2;
    --color-header-bg: rgba(44, 62, 80, 0.85);
    --color-border: rgba(149, 254, 247, 0.532);
    --gradient-hero-1: rgba(255, 255, 255, 0.3);
    --gradient-hero-2: rgba(85, 104, 105, 0.2);
    --gradient-hero-3: rgba(204, 204, 204, 0.15);
}

.miku-dark .hero::before {
    background-image: url('/icons/themes/miku/miku-dark.jpg');
    background-position: left top;
    background-size: cover;
    filter: brightness(0.5);
}

/* ===========================
   Espace Theme
   =========================== */

.space-light,
[data-theme="space"][data-theme-mode="light"] {
    --color-primary: #6314ca;
    --color-secondary: #6a24c5;
    --color-accent: #4f10a0;
    --color-highlight: #874ddb;
    --color-bg-primary: #f9f9f9;
    --color-bg-secondary: #ffffff;
    --color-bg-tertiary: #fcfcfc;
    --color-card-bg: #f9f9f9;
    --color-card-border: rgba(0, 0, 0, 0.15);
    --color-text-primary: #000000;
    --color-text-secondary: rgba(0, 0, 0, 0.75);
    --color-text-muted: rgba(0, 0, 0, 0.6);
    --color-header-bg: rgba(249, 249, 249, 0.85);
    --color-border: rgba(0, 0, 0, 0.15);
    --gradient-hero-1: rgba(99, 20, 202, 0.1);
    --gradient-hero-2: rgba(106, 36, 197, 0.08);
    --gradient-hero-3: rgba(79, 16, 160, 0.06);
}

.space-dark,
[data-theme="space"][data-theme-mode="dark"] {
    --color-primary: #6314ca;
    --color-secondary: #6a24c5;
    --color-accent: #4f10a0;
    --color-highlight: #874ddb;
    --color-bg-primary: #000000;
    --color-bg-secondary: #12032a;
    --color-bg-tertiary: #0c021b;
    --color-card-bg: rgba(18, 3, 42, 0.6);
    --color-card-border: rgba(231, 231, 231, 0.2);
    --color-text-primary: #e7e7e7;
    --color-text-secondary: rgba(231, 231, 231, 0.75);
    --color-text-muted: rgba(231, 231, 231, 0.6);
    --color-header-bg: rgba(0, 0, 0, 0.85);
    --color-border: rgba(231, 231, 231, 0.2);
    --gradient-hero-1: rgba(99, 20, 202, 0.3);
    --gradient-hero-2: rgba(106, 36, 197, 0.2);
    --gradient-hero-3: rgba(79, 16, 160, 0.15);
}

.space-light .hero,
[data-theme="space"][data-theme-mode="light"] .hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 70% -10%, rgba(255, 251, 233, 0.9) 0%, rgba(255, 251, 233, 0) 40%),
        radial-gradient(circle at 18% 8%, rgba(162, 208, 255, 0.35) 0%, rgba(162, 208, 255, 0) 36%),
        linear-gradient(180deg, #f5f9ff 0%, #e8f2ff 55%, #dce8ff 100%);
}

.space-dark .hero,
[data-theme="space"][data-theme-mode="dark"] .hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 70% -15%, rgba(255, 223, 121, 0.2) 0%, rgba(255, 223, 121, 0) 32%),
        radial-gradient(circle at 16% 10%, rgba(100, 185, 255, 0.28) 0%, rgba(100, 185, 255, 0) 34%),
        radial-gradient(circle at 85% 80%, rgba(170, 63, 255, 0.25) 0%, rgba(170, 63, 255, 0) 38%),
        linear-gradient(180deg, #040716 0%, #090f2a 50%, #130826 100%);
}

.space-light .hero::before,
[data-theme="space"][data-theme-mode="light"] .hero::before,
.space-dark .hero::before,
[data-theme="space"][data-theme-mode="dark"] .hero::before,
.space-light .hero::after,
[data-theme="space"][data-theme-mode="light"] .hero::after,
.space-dark .hero::after,
[data-theme="space"][data-theme-mode="dark"] .hero::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.space-light .hero::before,
[data-theme="space"][data-theme-mode="light"] .hero::before {
    background-image:
        radial-gradient(circle, rgba(33, 69, 129, 0.7) 0 1px, transparent 1.4px),
        radial-gradient(circle, rgba(56, 91, 158, 0.52) 0 1px, transparent 1.5px),
        radial-gradient(circle, rgba(112, 138, 194, 0.4) 0 1.2px, transparent 1.6px);
    background-size: 190px 190px, 260px 260px, 320px 320px;
    background-position: 0 0, 90px 35px, 35px 120px;
    opacity: 0.5;
    animation: space-stars-drift-light 90s linear infinite;
}

.space-dark .hero::before,
[data-theme="space"][data-theme-mode="dark"] .hero::before {
    background-image:
        radial-gradient(circle, rgba(255, 255, 255, 0.9) 0 1px, transparent 1.5px),
        radial-gradient(circle, rgba(179, 217, 255, 0.8) 0 1.2px, transparent 1.7px),
        radial-gradient(circle, rgba(255, 206, 138, 0.65) 0 1.3px, transparent 1.8px),
        radial-gradient(circle, rgba(145, 125, 255, 0.5) 0 1.1px, transparent 1.6px);
    background-size: 170px 170px, 250px 250px, 320px 320px, 420px 420px;
    background-position: 0 0, 110px 40px, 40px 145px, 180px 90px;
    opacity: 0.85;
    animation: space-stars-drift-dark 65s linear infinite;
}

.space-light .hero::after,
[data-theme="space"][data-theme-mode="light"] .hero::after {
    background:
        radial-gradient(circle at 82% 24%, rgba(120, 150, 210, 0.34) 0 42px, transparent 44px),
        radial-gradient(circle at 82% 24%, rgba(120, 150, 210, 0.22) 0 56px, transparent 60px),
        radial-gradient(circle at 16% 74%, rgba(255, 188, 126, 0.35) 0 26px, transparent 28px),
        radial-gradient(circle at 16% 74%, rgba(255, 188, 126, 0.2) 0 36px, transparent 40px),
        linear-gradient(140deg, rgba(255, 255, 255, 0) 46%, rgba(255, 255, 255, 0.45) 49%, rgba(255, 255, 255, 0) 52%);
    opacity: 0.45;
    transform-origin: center;
    animation: space-nebula-float 22s ease-in-out infinite alternate;
}

.space-dark .hero::after,
[data-theme="space"][data-theme-mode="dark"] .hero::after {
    background:
        radial-gradient(circle at 80% 24%, rgba(153, 193, 255, 0.6) 0 36px, transparent 38px),
        radial-gradient(circle at 80% 24%, rgba(153, 193, 255, 0.28) 0 58px, transparent 62px),
        radial-gradient(circle at 13% 78%, rgba(255, 158, 89, 0.5) 0 22px, transparent 24px),
        radial-gradient(circle at 13% 78%, rgba(255, 158, 89, 0.24) 0 33px, transparent 36px),
        linear-gradient(130deg, rgba(255, 255, 255, 0) 34%, rgba(187, 226, 255, 0.6) 36%, rgba(255, 255, 255, 0) 38%),
        linear-gradient(120deg, rgba(255, 255, 255, 0) 71%, rgba(255, 214, 145, 0.42) 73%, rgba(255, 255, 255, 0) 75%);
    opacity: 0.72;
    transform-origin: center;
    animation: space-nebula-float 18s ease-in-out infinite alternate;
}

.space-light .hero-content,
[data-theme="space"][data-theme-mode="light"] .hero-content,
.space-dark .hero-content,
[data-theme="space"][data-theme-mode="dark"] .hero-content {
    position: relative;
    z-index: 1;
}

@keyframes space-stars-drift-light {
    from {
        background-position: 0 0, 90px 35px, 35px 120px;
    }

    to {
        background-position: -120px 90px, 10px 140px, -55px 260px;
    }
}

@keyframes space-stars-drift-dark {
    from {
        background-position: 0 0, 110px 40px, 40px 145px, 180px 90px;
    }

    to {
        background-position: -140px 120px, -10px 180px, -75px 285px, 40px 270px;
    }
}

@keyframes space-nebula-float {
    from {
        transform: translate3d(-1.5%, -1%, 0) scale(1);
    }

    to {
        transform: translate3d(1.5%, 1.2%, 0) scale(1.04);
    }
}

@media (prefers-reduced-motion: reduce) {

    .space-light .hero::before,
    [data-theme="space"][data-theme-mode="light"] .hero::before,
    .space-dark .hero::before,
    [data-theme="space"][data-theme-mode="dark"] .hero::before,
    .space-light .hero::after,
    [data-theme="space"][data-theme-mode="light"] .hero::after,
    .space-dark .hero::after,
    [data-theme="space"][data-theme-mode="dark"] .hero::after {
        animation: none;
    }
}

/* ===========================
   Hacker Theme
   =========================== */
/* Hacker theme moved to /css/theme-hacker.css to keep this file maintainable. */

/* ===========================
   Retrowave Theme
   =========================== */
.retrowave-dark,
[data-theme="retrowave"][data-theme-mode="dark"] {
    --color-primary: #ffd889;
    --color-secondary: #6633ff;
    --color-accent: #ffc966;
    --color-highlight: #8c66ff;
    --color-bg-primary: #130133;
    --color-bg-secondary: #362259;
    --color-bg-tertiary: #2a1846;
    --color-card-bg: rgba(54, 34, 89, 0.6);
    --color-card-border: rgba(224, 36, 120, 0.2);
    --color-text-primary: #e02478;
    --color-text-secondary: rgba(224, 36, 120, 0.75);
    --color-text-muted: rgba(224, 36, 120, 0.6);
    --color-header-bg: rgba(19, 1, 51, 0.85);
    --color-border: rgba(224, 36, 120, 0.2);
    --gradient-hero-1: rgba(255, 216, 137, 0.3);
    --gradient-hero-2: rgba(102, 51, 255, 0.2);
    --gradient-hero-3: rgba(255, 201, 102, 0.15);
}

.retrowave-light .hero {
    background-image: url('/icons/themes/retro/retrowave-light.jpg');
    background-position: center;
    background-size: cover;
}

.retrowave-light,
[data-theme="retrowave"][data-theme-mode="light"] {
    --color-primary: #ffd889;
    --color-secondary: #6633ff;
    --color-accent: #ffc966;
    --color-highlight: #8c66ff;
    --color-bg-primary: #fff5e5;
    --color-bg-secondary: #ffffff;
    --color-bg-tertiary: #fffaf0;
    --color-card-bg: #fff5e5;
    --color-card-border: rgba(19, 1, 51, 0.15);
    --color-text-primary: #130133;
    --color-text-secondary: rgba(19, 1, 51, 0.75);
    --color-text-muted: rgba(19, 1, 51, 0.6);
    --color-header-bg: rgba(255, 245, 229, 0.85);
    --color-border: rgba(19, 1, 51, 0.15);
    --gradient-hero-1: rgba(255, 216, 137, 0.1);
    --gradient-hero-2: rgba(102, 51, 255, 0.08);
    --gradient-hero-3: rgba(255, 201, 102, 0.06);
}

.retrowave-dark .hero::before {
    background-image: url('/icons/themes/retro/retrowave-dark.jpg');
    background-position: center top;
    background-size: cover;
    filter: brightness(0.5);
}

/* ===========================
   Hellsing Theme
   =========================== */

.hellsing-light,
[data-theme="hellsing"][data-theme-mode="light"] {
    --color-primary: #e20300;
    --color-secondary: #860000;
    --color-accent: #b50200;
    --color-highlight: #8b0000;
    --color-bg-primary: #e1dfb8;
    --color-bg-secondary: #a49d5f;
    --color-bg-tertiary: #dad06d;
    --color-card-bg: #e8dcb8;
    --color-card-border: rgba(0, 0, 0, 0.15);
    --color-text-primary: #000000;
    --color-text-secondary: rgba(0, 0, 0, 0.75);
    --color-text-muted: rgba(0, 0, 0, 0.6);
    --color-header-bg: #eae9c6;
    --color-border: rgba(0, 0, 0, 0.15);
    --gradient-hero-1: rgba(226, 3, 0, 0.1);
    --gradient-hero-2: rgba(100, 0, 0, 0.08);
    --gradient-hero-3: rgba(181, 2, 0, 0.06);
}

.hellsing-light .hero {
    background-image: url('/icons/themes/hellsing/shro2.webp');
    background-position: center;
    background-size: cover;
}

.hellsing-dark,
[data-theme="hellsing"][data-theme-mode="dark"] {
    --color-primary: #fff;
    --color-secondary: #640000;
    --color-accent: #0e6d1e;
    --color-highlight: #8b0000;
    --color-bg-primary: #000000;
    --color-bg-secondary: #001504;
    --color-bg-tertiary: #000000;
    --color-card-bg: rgba(0, 0, 0, 0.6);
    --color-card-border: rgba(226, 3, 0, 0.2);
    --color-text-primary: #e20300;
    --color-text-secondary: rgba(226, 3, 0, 0.75);
    --color-text-muted: rgba(226, 3, 0, 0.6);
    --color-header-bg: rgba(0, 0, 0, 0.85);
    --color-border: rgba(226, 3, 0, 0.2);
    --gradient-hero-1: rgba(255, 255, 255, 0.3);
    --gradient-hero-2: rgba(100, 0, 0, 0.2);
    --gradient-hero-3: rgba(204, 204, 204, 0.15);
}

.hellsing-dark .hero::before {
    background-image: url('/icons/themes/hellsing/alucard2.jpg');
    background-position: center top;
    background-size: cover;
    filter: brightness(0.5);
}

/* ===========================
   Foret Theme
   =========================== */
.foret-light,
[data-theme="foret"][data-theme-mode="light"] {
    --color-primary: #215522;
    --color-secondary: #36941a;
    --color-accent: #10c516;
    --color-highlight: #27b353;
    --color-bg-primary: #f5faf5;
    --color-bg-secondary: #ffffff;
    --color-bg-tertiary: #f8fcf8;
    --color-card-bg: #f5faf5;
    --color-card-border: rgba(76, 104, 73, 0.15);
    --color-text-primary: #75a56f;
    --color-text-secondary: #4b6407;
    --color-text-muted: rgba(76, 104, 73, 0.6);
    --color-header-bg: rgba(245, 250, 245, 0.85);
    --color-border: rgba(76, 104, 73, 0.15);
    --gradient-hero-1: rgba(76, 175, 80, 0.1);
    --gradient-hero-2: rgba(62, 110, 77, 0.08);
    --gradient-hero-3: rgba(61, 139, 64, 0.06);
}

.foret-light .hero {
    background-image: url('/images/themes/forest-light.jpg');
    background-position: center;
    background-size: cover;
}

.foret-light .hero p {
    backdrop-filter: blur(3px);
}

.foret-dark,
[data-theme="foret"][data-theme-mode="dark"] {
    --color-primary: #4caf50;
    --color-secondary: #9ed6b0;
    --color-accent: #3d8b40;
    --color-highlight: #5a8d6a;
    --color-bg-primary: #374236;
    --color-bg-secondary: #4b5332;
    --color-bg-tertiary: #3d4d33;
    --color-card-bg: rgba(40, 58, 19, 0.6);
    --color-card-border: rgba(220, 229, 209, 0.2);
    --color-text-primary: #dce5d1;
    --color-text-secondary: rgba(220, 229, 209, 0.75);
    --color-text-muted: rgba(220, 229, 209, 0.6);
    --color-header-bg: rgba(76, 104, 73, 0.85);
    --color-border: rgba(220, 229, 209, 0.2);
    --gradient-hero-1: rgba(76, 175, 80, 0.3);
    --gradient-hero-2: rgba(62, 110, 77, 0.2);
    --gradient-hero-3: rgba(61, 139, 64, 0.15);
}

.foret-dark .hero::before {
    background-image: url('/images/themes/forest-dark.jpg');
    background-position: center center;
    background-size: cover;
    filter: brightness(0.5);
}

/* ===========================
   Ocean Theme
   =========================== */
.ocean-dark,
[data-theme="ocean"][data-theme-mode="dark"] {
    --color-primary: #4dd0e1;
    --color-secondary: #03a9f4;
    --color-accent: #3db8c6;
    --color-highlight: #35b9f6;
    --color-bg-primary: #013a63;
    --color-bg-secondary: #025e73;
    --color-bg-tertiary: #025166;
    --color-card-bg: rgba(2, 94, 115, 0.6);
    --color-card-border: rgba(224, 247, 250, 0.2);
    --color-text-primary: #e0f7fa;
    --color-text-secondary: rgba(224, 247, 250, 0.75);
    --color-text-muted: rgba(224, 247, 250, 0.6);
    --color-header-bg: rgba(1, 58, 99, 0.85);
    --color-border: rgba(224, 247, 250, 0.2);
    --gradient-hero-1: rgba(77, 208, 225, 0.3);
    --gradient-hero-2: rgba(3, 169, 244, 0.2);
    --gradient-hero-3: rgba(61, 184, 198, 0.15);
}

.ocean-dark .hero::before {
    background-image: url('/images/themes/ocean-dark.jpg');
    background-position: center;
    background-size: cover;
    filter: brightness(0.5);
}

.ocean-light,
[data-theme="ocean"][data-theme-mode="light"] {
    --color-primary: #188492;
    --color-secondary: #03a9f4;
    --color-accent: #3db8c6;
    --color-highlight: #35b9f6;
    --color-bg-primary: #f0fbfc;
    --color-bg-secondary: #ffffff;
    --color-bg-tertiary: #f5fdfd;
    --color-card-bg: #f0fbfc;
    --color-card-border: rgba(1, 58, 99, 0.15);
    --color-text-primary: #013a63;
    --color-text-secondary: rgba(1, 58, 99, 0.75);
    --color-text-muted: rgba(1, 58, 99, 0.6);
    --color-header-bg: rgba(240, 251, 252, 0.85);
    --color-border: rgba(1, 58, 99, 0.15);
    --gradient-hero-1: rgba(77, 208, 225, 0.1);
    --gradient-hero-2: rgba(3, 169, 244, 0.08);
    --gradient-hero-3: rgba(61, 184, 198, 0.06);
}

.ocean-light .hero {
    background-image: url('/images/themes/ocean-light.jpg');
    background-position: center;
    background-size: cover;
}

/* ===========================
   Cafe Theme
   =========================== */
.cafe-light,
[data-theme="cafe"][data-theme-mode="light"] {
    --color-primary: #a0522d;
    --color-secondary: #8b5a2b;
    --color-accent: #804124;
    --color-highlight: #a4754e;
    --color-bg-primary: #d8c4b6;
    --color-bg-secondary: #bfa694;
    --color-bg-tertiary: #c8b5a5;
    --color-card-bg: #d8c4b6;
    --color-card-border: rgba(62, 44, 35, 0.15);
    --color-text-primary: #3e2c23;
    --color-text-secondary: rgba(62, 44, 35, 0.75);
    --color-text-muted: rgba(62, 44, 35, 0.6);
    --color-header-bg: rgba(216, 196, 182, 0.85);
    --color-border: rgba(62, 44, 35, 0.15);
    --gradient-hero-1: rgba(160, 82, 45, 0.1);
    --gradient-hero-2: rgba(139, 90, 43, 0.08);
    --gradient-hero-3: rgba(128, 65, 36, 0.06);
}

.cafe-dark,
[data-theme="cafe"][data-theme-mode="dark"] {
    --color-primary: #a0522d;
    --color-secondary: #8b5a2b;
    --color-accent: #804124;
    --color-highlight: #a4754e;
    --color-bg-primary: #2b1f1a;
    --color-bg-secondary: #1f1612;
    --color-bg-tertiary: #251b16;
    --color-card-bg: rgba(31, 22, 18, 0.6);
    --color-card-border: rgba(216, 196, 182, 0.2);
    --color-text-primary: #d8c4b6;
    --color-text-secondary: rgba(216, 196, 182, 0.75);
    --color-text-muted: rgba(216, 196, 182, 0.6);
    --color-header-bg: rgba(43, 31, 26, 0.85);
    --color-border: rgba(216, 196, 182, 0.2);
    --gradient-hero-1: rgba(160, 82, 45, 0.3);
    --gradient-hero-2: rgba(139, 90, 43, 0.2);
    --gradient-hero-3: rgba(128, 65, 36, 0.15);
}

/* ===========================
   Lavande Theme
   =========================== */

.lavande-light,
[data-theme="lavande"][data-theme-mode="light"] {
    --color-primary: #e4dff2;
    --color-secondary: #f9e8fd;
    --color-accent: #d0bcf2;
    --color-highlight: #c7b1e5;
    --color-bg-primary: #f5f3f9;
    --color-bg-secondary: #ffffff;
    --color-bg-tertiary: #7e57c2;
    --color-card-bg: #f5f3f9;
    --color-card-border: rgba(74, 58, 106, 0.15);
    --color-text-primary: #4a3a6a;
    --color-text-secondary: rgba(74, 58, 106, 0.75);
    --color-text-muted: rgba(74, 58, 106, 0.6);
    --color-header-bg: rgba(245, 243, 249, 0.85);
    --color-border: rgba(74, 58, 106, 0.15);
    --gradient-hero-1: rgba(149, 117, 205, 0.1);
    --gradient-hero-2: rgba(179, 157, 219, 0.08);
    --gradient-hero-3: rgba(126, 87, 194, 0.06);
}

.lavande-light .hero {
    background-image: url('/images/themes/lavande-light.jpg');
    background-position: center;
    background-size: cover;
}

.lavande-dark,
[data-theme="lavande"][data-theme-mode="dark"] {
    --color-primary: #9575cd;
    --color-secondary: #b39ddb;
    --color-accent: #7e57c2;
    --color-highlight: #c7b1e5;
    --color-bg-primary: #4a3a6a;
    --color-bg-secondary: #30214d;
    --color-bg-tertiary: #3a2c5a;
    --color-card-bg: rgba(48, 33, 77, 0.6);
    --color-card-border: rgba(237, 231, 246, 0.2);
    --color-text-primary: #ede7f6;
    --color-text-secondary: rgba(237, 231, 246, 0.75);
    --color-text-muted: rgba(237, 231, 246, 0.6);
    --color-header-bg: rgba(74, 58, 106, 0.85);
    --color-border: rgba(237, 231, 246, 0.2);
    --gradient-hero-1: rgba(149, 117, 205, 0.3);
    --gradient-hero-2: rgba(179, 157, 219, 0.2);
    --gradient-hero-3: rgba(126, 87, 194, 0.15);
}

.lavande-dark .hero::before {
    background-image: url('/images/themes/lavande-dark.jpg');
    background-position: bottom;
    background-size: cover;
    filter: brightness(0.5);
}

/* ===========================
   Cyberpunk Theme
   =========================== */
.cyberpunk-dark,
[data-theme="cyberpunk"][data-theme-mode="dark"] {
    --color-primary: #e318dd;
    --color-secondary: #00fff7;
    --color-accent: #b813b0;
    --color-highlight: #66fffb;
    --color-bg-primary: #0f0236;
    --color-bg-secondary: #1e0247;
    --color-bg-tertiary: #17023c;
    --color-card-bg: rgba(30, 2, 71, 0.6);
    --color-card-border: rgba(255, 237, 33, 0.2);
    --color-text-primary: #ffed21;
    --color-text-secondary: rgba(255, 237, 33, 0.75);
    --color-text-muted: rgba(255, 237, 33, 0.6);
    --color-header-bg: rgba(15, 2, 54, 0.85);
    --color-border: rgba(255, 237, 33, 0.2);
    --gradient-hero-1: rgba(227, 24, 221, 0.3);
    --gradient-hero-2: rgba(0, 255, 247, 0.2);
    --gradient-hero-3: rgba(184, 19, 176, 0.15);
}

.cyberpunk-light,
[data-theme="cyberpunk"][data-theme-mode="light"] {
    --color-primary: #e318dd;
    --color-secondary: #00fff7;
    --color-accent: #b813b0;
    --color-highlight: #66fffb;
    --color-bg-primary: #fffdf0;
    --color-bg-secondary: #ffffff;
    --color-bg-tertiary: #fffef5;
    --color-card-bg: #fffdf0;
    --color-card-border: rgba(15, 2, 54, 0.15);
    --color-text-primary: #0f0236;
    --color-text-secondary: rgba(15, 2, 54, 0.75);
    --color-text-muted: rgba(15, 2, 54, 0.6);
    --color-header-bg: rgba(255, 253, 240, 0.85);
    --color-border: rgba(15, 2, 54, 0.15);
    --gradient-hero-1: rgba(227, 24, 221, 0.1);
    --gradient-hero-2: rgba(0, 255, 247, 0.08);
    --gradient-hero-3: rgba(184, 19, 176, 0.06);
}

/* ===========================
   Minecraft Theme
   =========================== */
.minecraft-dark,
[data-theme="minecraft"][data-theme-mode="dark"] {
    --color-primary: #c79eff;
    --color-secondary: #8b5fb8;
    --color-accent: #a87dd4;
    --color-highlight: #b48ce0;
    --color-bg-primary: #0a0014;
    --color-bg-secondary: #1f1433;
    --color-bg-tertiary: #160a26;
    --color-card-bg: rgba(31, 20, 51, 0.6);
    --color-card-border: rgba(223, 223, 159, 0.2);
    --color-text-primary: #dfdf9f;
    --color-text-secondary: rgba(223, 223, 159, 0.75);
    --color-text-muted: rgba(223, 223, 159, 0.6);
    --color-header-bg: rgba(10, 0, 20, 0.85);
    --color-border: rgba(223, 223, 159, 0.2);
    --gradient-hero-1: rgba(199, 158, 255, 0.3);
    --gradient-hero-2: rgba(139, 95, 184, 0.2);
    --gradient-hero-3: rgba(168, 125, 212, 0.15);

    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.minecraft-light,
[data-theme="minecraft"][data-theme-mode="light"] {
    --color-primary: #949494;
    --color-secondary: #8b8b8b;
    --color-accent: #838383;
    --color-highlight: #6f9ad9;
    /*--color-bg-primary: #4d3528;*/
    --color-bg-secondary: #196906;
    --color-bg-tertiary: #00a205;
    --color-card-bg: rgba(65, 65, 65, 0.85);
    --color-card-border: rgba(237, 237, 237, 0.2);
    --color-text-primary: #ededed;
    --color-text-secondary: rgba(237, 237, 237, 0.75);
    --color-text-muted: rgba(237, 237, 237, 0.6);
    --color-header-bg: #6f9ad9;
    --color-border: rgba(237, 237, 237, 0.2);
    --gradient-hero-1: rgba(141, 176, 240, 0.3);
    --gradient-hero-2: rgba(42, 42, 42, 0.2);
    --gradient-hero-3: rgba(111, 154, 217, 0.15);

    background-image: url('/icons/themes/minecraft/dirt.png');
    background-repeat: repeat;
    background-size: 80px 80px;

    box-shadow:
        inset 20px 0 20px rgba(0, 0, 0, 0.6),
        inset -20px 0 20px rgba(0, 0, 0, 0.6);
    filter: brightness(0.8);

    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.minecraft-light button,
.minecraft-light a,
.minecraft-light p,
.minecraft-light h2,
.minecraft-light h3,
.minecraft-light h4 {
    text-shadow: 0 4px 4px rgba(0, 0, 0, 0.8);
    font-family: "Tiny5", sans-serif;
}

.minecraft-dark button,
.minecraft-dark a,
.minecraft-dark p,
.minecraft-dark h2,
.minecraft-dark h3,
.minecraft-dark h4 {
    font-family: "Tiny5", sans-serif;
}

.minecraft-light .hero h1,
.minecraft-dark .hero h1 {
    background-image: url('/icons/themes/minecraft/cobblestone.png');
    background-repeat: repeat;
    background-size: 64px 64px;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: brightness(1.2) contrast(1.1);
    -webkit-text-stroke: 2px #000;
    text-stroke: 2px #000;
    font-family: "Jersey 10", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 8rem;
    line-height: 0.8;
}

.minecraft-dark .hero h1 {
    background-size: 32px 32px;
    background-image: url('/icons/themes/minecraft/end_stone.png');
}

.minecraft-light .hero p,
.minecraft-light .hero a,
.minecraft-light .divided p,
.minecraft-light .divided a,
.minecraft-dark .hero p,
.minecraft-dark .hero a,
.minecraft-dark .divided p,
.minecraft-dark .divided a {
    font-size: 1.6rem;
}

.minecraft-light img,
.minecraft-dark img {
    background-image: url('/icons/themes/minecraft/oak_planks.png');
    background-size: 80px 80px;
    border-radius: 8px;
    text-shadow: inset 4px 4px #fff;
}

.minecraft-dark img {
    background-image: url('/icons/themes/minecraft/crying_obsidian.png');
}

.theme-btn.minecraft-dark,
.minecraft-dark .hero,
.minecraft-dark .thin-section,
.minecraft-dark .section-light,
.theme-btn.minecraft-light,
.minecraft-light .hero,
.minecraft-light .thin-section,
.minecraft-light .section-light {
    background-image: url('/icons/themes/minecraft/grass.png');
    background-repeat: repeat;
    background-size: 96px 96px;
    border: 2px solid var(--color-bg-secondary);
    border-radius: 5px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
}

.theme-btn.minecraft-dark,
.minecraft-dark .thin-section,
.minecraft-dark .section-light {
    background-size: 128px 128px;
    background-image: url('/icons/themes/minecraft/crying_obsidian.png');
}

.minecraft-dark body {
    overflow-x: hidden;
}

.minecraft-dark .hero {
    background-size: 512px 512px;
    background-image:
        url('/icons/themes/minecraft/end_portal.png'),
        url('/icons/themes/minecraft/end_portal.png'),
        url('/icons/themes/minecraft/end_portal.png'),
        url('/icons/themes/minecraft/end_portal.png');
    background-position: 0 0, 512px 0, 0 512px, 512px 512px;
    transform-style: preserve-3d;
    transition: transform 0.1s ease-out;

}

.minecraft-dark .hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('/icons/themes/minecraft/end_portal.png');
    background-size: 512px 512px;
    transform: rotate(90deg);
    opacity: 0.7;
    z-index: -1;
}

.minecraft-dark .hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('/icons/themes/minecraft/end_portal.png');
    background-size: 512px 512px;
    transform: rotate(180deg);
    opacity: 0.5;
    z-index: -2;
}

/* ===========================
   Noxelis Theme
   =========================== */
.noxelis-dark,
[data-theme="noxelis"][data-theme-mode="dark"] {
    --color-primary: #8acee0;
    --color-secondary: #7352ab;
    --color-accent: #6eb9ca;
    --color-highlight: #9175c2;
    --color-bg-primary: #020c28;
    --color-bg-secondary: #425f9d;
    --color-bg-tertiary: #314875;
    --color-card-bg: rgba(66, 95, 157, 0.6);
    --color-card-border: rgba(255, 255, 255, 0.2);
    --color-text-primary: #ffffff;
    --color-text-secondary: rgba(255, 255, 255, 0.75);
    --color-text-muted: rgba(255, 255, 255, 0.6);
    --color-header-bg: rgba(2, 12, 40, 0.85);
    --color-border: rgba(255, 255, 255, 0.2);
    --gradient-hero-1: rgba(138, 206, 224, 0.3);
    --gradient-hero-2: rgba(115, 82, 171, 0.2);
    --gradient-hero-3: rgba(110, 185, 202, 0.15);
}

.noxelis-light,
[data-theme="noxelis"][data-theme-mode="light"] {
    --color-primary: #8acee0;
    --color-secondary: #7352ab;
    --color-accent: #6eb9ca;
    --color-highlight: #9175c2;
    --color-bg-primary: #f0f5ff;
    --color-bg-secondary: #ffffff;
    --color-bg-tertiary: #f5f8ff;
    --color-card-bg: #f0f5ff;
    --color-card-border: rgba(2, 12, 40, 0.15);
    --color-text-primary: #020c28;
    --color-text-secondary: rgba(2, 12, 40, 0.75);
    --color-text-muted: rgba(2, 12, 40, 0.6);
    --color-header-bg: rgba(240, 245, 255, 0.85);
    --color-border: rgba(2, 12, 40, 0.15);
    --gradient-hero-1: rgba(138, 206, 224, 0.1);
    --gradient-hero-2: rgba(115, 82, 171, 0.08);
    --gradient-hero-3: rgba(110, 185, 202, 0.06);
}

/* ===========================
   Infinity54 Theme
   =========================== */
.infinity54-light,
[data-theme="infinity54"][data-theme-mode="light"] {
    --color-primary: #fadbdb;
    --color-secondary: #fadbdb;
    --color-accent: #fadbdb;
    --color-highlight: #b82e2e;
    --color-bg-primary: #ffffff;
    --color-bg-secondary: #fadbdb;
    --color-bg-tertiary: #fceaea;
    --color-card-bg: #ffffff;
    --color-card-border: #fe0000;
    --color-text-primary: #000;
    --color-text-secondary: rgba(0, 0, 0, 0.75);
    --color-text-muted: rgba(0, 0, 0, 0.6);
    --color-header-bg: rgba(255, 255, 255, 0.85);
    --color-border: rgba(0, 0, 0, 0.15);
    --gradient-hero-1: rgba(254, 0, 0, 0.1);
    --gradient-hero-2: rgba(157, 0, 0, 0.08);
    --gradient-hero-3: rgba(197, 0, 0, 0.06);
}

.infinity54-light .hero {
    background-image: url('/icons/themes/infinty54/infinty54-light.jpg');
    background-position: center;
    background-size: cover;
}

.infinity54-dark,
[data-theme="infinity54"][data-theme-mode="dark"] {
    --color-primary: #b82e2e;
    --color-secondary: #9d0000;
    --color-accent: #c50000;
    --color-highlight: #fe0000;
    --color-bg-primary: #1a1a1a;
    --color-bg-secondary: #101010;
    --color-bg-tertiary: #131313;
    --color-card-bg: rgba(16, 16, 16, 0.6);
    --color-card-border: rgba(255, 255, 255, 0.2);
    --color-text-primary: #fe0000;
    --color-text-secondary: rgba(255, 255, 255, 0.75);
    --color-text-muted: rgba(255, 255, 255, 0.6);
    --color-header-bg: rgba(26, 26, 26, 0.85);
    --color-border: rgba(255, 255, 255, 0.2);
    --gradient-hero-1: rgba(254, 0, 0, 0.3);
    --gradient-hero-2: rgba(157, 0, 0, 0.2);
    --gradient-hero-3: rgba(197, 0, 0, 0.15);
}

.infinity54-dark .hero::before {
    background-image: url('/icons/themes/infinty54/InFinity_54_-_V1.jpg');
    background-position: center top;
    background-size: cover;
    filter: brightness(0.5);
}

/* ===========================
   Christmas1 Theme
   =========================== */
.christmas1-dark,
[data-theme="christmas1"][data-theme-mode="dark"] {
    --color-primary: #24ad1d;
    --color-secondary: #003d07;
    --color-accent: #1d8a17;
    --color-highlight: #006b0c;
    --color-bg-primary: #1a1e73;
    --color-bg-secondary: #121378;
    --color-bg-tertiary: #151675;
    --color-card-bg: rgba(18, 19, 120, 0.6);
    --color-card-border: rgba(255, 255, 255, 0.2);
    --color-text-primary: #ffffff;
    --color-text-secondary: rgba(255, 255, 255, 0.75);
    --color-text-muted: rgba(255, 255, 255, 0.6);
    --color-header-bg: rgba(26, 30, 115, 0.85);
    --color-border: rgba(255, 255, 255, 0.2);
    --gradient-hero-1: rgba(36, 173, 29, 0.3);
    --gradient-hero-2: rgba(0, 61, 7, 0.2);
    --gradient-hero-3: rgba(29, 138, 23, 0.15);
}

.christmas1-light,
[data-theme="christmas1"][data-theme-mode="light"] {
    --color-primary: #24ad1d;
    --color-secondary: #003d07;
    --color-accent: #1d8a17;
    --color-highlight: #006b0c;
    --color-bg-primary: #f0f0fa;
    --color-bg-secondary: #ffffff;
    --color-bg-tertiary: #f5f5fc;
    --color-card-bg: #f0f0fa;
    --color-card-border: rgba(26, 30, 115, 0.15);
    --color-text-primary: #1a1e73;
    --color-text-secondary: rgba(26, 30, 115, 0.75);
    --color-text-muted: rgba(26, 30, 115, 0.6);
    --color-header-bg: rgba(240, 240, 250, 0.85);
    --color-border: rgba(26, 30, 115, 0.15);
    --gradient-hero-1: rgba(36, 173, 29, 0.1);
    --gradient-hero-2: rgba(0, 61, 7, 0.08);
    --gradient-hero-3: rgba(29, 138, 23, 0.06);
}

/* ===========================
   Christmas2 Theme
   =========================== */
.christmas2-dark,
[data-theme="christmas2"][data-theme-mode="dark"] {
    --color-primary: #f5c322;
    --color-secondary: #003d07;
    --color-accent: #d4a91d;
    --color-highlight: #006b0c;
    --color-bg-primary: #9d3434;
    --color-bg-secondary: #5b0b0b;
    --color-bg-tertiary: #7c2020;
    --color-card-bg: rgba(91, 11, 11, 0.6);
    --color-card-border: rgba(255, 255, 255, 0.2);
    --color-text-primary: #ffffff;
    --color-text-secondary: rgba(255, 255, 255, 0.75);
    --color-text-muted: rgba(255, 255, 255, 0.6);
    --color-header-bg: rgba(157, 52, 52, 0.85);
    --color-border: rgba(255, 255, 255, 0.2);
    --gradient-hero-1: rgba(245, 195, 34, 0.3);
    --gradient-hero-2: rgba(0, 61, 7, 0.2);
    --gradient-hero-3: rgba(212, 169, 29, 0.15);
}

.christmas2-light,
[data-theme="christmas2"][data-theme-mode="light"] {
    --color-primary: #f5c322;
    --color-secondary: #003d07;
    --color-accent: #d4a91d;
    --color-highlight: #006b0c;
    --color-bg-primary: #fff5f5;
    --color-bg-secondary: #ffffff;
    --color-bg-tertiary: #fff8f8;
    --color-card-bg: #fff5f5;
    --color-card-border: rgba(157, 52, 52, 0.15);
    --color-text-primary: #9d3434;
    --color-text-secondary: rgba(157, 52, 52, 0.75);
    --color-text-muted: rgba(157, 52, 52, 0.6);
    --color-header-bg: rgba(255, 245, 245, 0.85);
    --color-border: rgba(157, 52, 52, 0.15);
    --gradient-hero-1: rgba(245, 195, 34, 0.1);
    --gradient-hero-2: rgba(0, 61, 7, 0.08);
    --gradient-hero-3: rgba(212, 169, 29, 0.06);
}

/* ===========================
   Halloween Theme
   =========================== */
.halloween-dark,
[data-theme="halloween"][data-theme-mode="dark"] {
    --color-primary: #47bd14;
    --color-secondary: #2720ff;
    --color-accent: #399410;
    --color-highlight: #524dff;
    --color-bg-primary: #0b0317;
    --color-bg-secondary: #c96b0d;
    --color-bg-tertiary: #804408;
    --color-card-bg: rgba(201, 107, 13, 0.6);
    --color-card-border: rgba(255, 255, 255, 0.2);
    --color-text-primary: #ffffff;
    --color-text-secondary: rgba(255, 255, 255, 0.75);
    --color-text-muted: rgba(255, 255, 255, 0.6);
    --color-header-bg: rgba(11, 3, 23, 0.85);
    --color-border: rgba(255, 255, 255, 0.2);
    --gradient-hero-1: rgba(71, 189, 20, 0.3);
    --gradient-hero-2: rgba(39, 32, 255, 0.2);
    --gradient-hero-3: rgba(57, 148, 16, 0.15);
}

.halloween-light,
[data-theme="halloween"][data-theme-mode="light"] {
    --color-primary: #ff6b00;
    --color-secondary: #8b4dff;
    --color-accent: #e65c00;
    --color-highlight: #a366ff;
    --color-bg-primary: #fff5e8;
    --color-bg-secondary: #ffffff;
    --color-bg-tertiary: #fff8f0;
    --color-card-bg: #fff5e8;
    --color-card-border: rgba(20, 20, 20, 0.15);
    --color-text-primary: #1a1a1a;
    --color-text-secondary: rgba(20, 20, 20, 0.75);
    --color-text-muted: rgba(20, 20, 20, 0.6);
    --color-header-bg: rgba(255, 245, 232, 0.85);
    --color-border: rgba(20, 20, 20, 0.15);
    --gradient-hero-1: rgba(255, 107, 0, 0.1);
    --gradient-hero-2: rgba(139, 77, 255, 0.08);
    --gradient-hero-3: rgba(230, 92, 0, 0.06);
}