html {
    background: #020617;
}

body.theme-light,
body[data-color-theme] {
    --theme-page: #fff9e8;
    --theme-glow-one: rgba(255, 222, 132, 0.46);
    --theme-glow-two: rgba(255, 238, 184, 0.72);
    --theme-surface-strong: #fffdf5;
    --theme-surface: #fff8e5;
    --theme-surface-muted: #f7edcf;
    --theme-border: #e5d4a4;
    --theme-text: #4a3b23;
    --theme-muted: #817052;
    --theme-accent: #edbd54;
    --theme-accent-hover: #dfa23b;
    --theme-accent-text: #4a3213;
    --theme-accent-link: #9a5b19;
    --theme-accent-border: #e7ba62;
    --theme-modal-backdrop: rgba(91, 67, 25, 0.76);
    background:
        radial-gradient(circle at top right, var(--theme-glow-one), transparent 30rem),
        radial-gradient(circle at bottom left, var(--theme-glow-two), transparent 34rem),
        var(--theme-page) !important;
    color: var(--theme-text) !important;
}

/* Light themes */
body[data-color-theme="ocean"] {
    --theme-page: #f2fbff;
    --theme-glow-one: rgba(152, 218, 241, 0.45);
    --theme-glow-two: rgba(194, 236, 242, 0.7);
    --theme-surface-strong: #fbfeff;
    --theme-surface: #f1fbfd;
    --theme-surface-muted: #dff2f4;
    --theme-border: #bddce2;
    --theme-text: #24434d;
    --theme-muted: #63808a;
    --theme-accent: #61b7c8;
    --theme-accent-hover: #479eaf;
    --theme-accent-text: #173e48;
    --theme-accent-link: #287c91;
    --theme-accent-border: #83c7d4;
    --theme-modal-backdrop: rgba(25, 80, 97, 0.72);
}

body[data-color-theme="sage"] {
    --theme-page: #f5faef;
    --theme-glow-one: rgba(184, 215, 150, 0.43);
    --theme-glow-two: rgba(220, 235, 188, 0.7);
    --theme-surface-strong: #fcfff8;
    --theme-surface: #f5faed;
    --theme-surface-muted: #e4efdb;
    --theme-border: #c8dbb9;
    --theme-text: #354a31;
    --theme-muted: #6d8269;
    --theme-accent: #91b878;
    --theme-accent-hover: #789f60;
    --theme-accent-text: #263c22;
    --theme-accent-link: #547b45;
    --theme-accent-border: #accb96;
    --theme-modal-backdrop: rgba(49, 84, 48, 0.72);
}

/* Dark themes */
body[data-color-theme="midnight"] {
    --theme-page: #111827;
    --theme-glow-one: rgba(67, 96, 150, 0.22);
    --theme-glow-two: rgba(36, 50, 83, 0.36);
    --theme-surface-strong: #111c31;
    --theme-surface: #17233a;
    --theme-surface-muted: #23324d;
    --theme-border: #3b4d6a;
    --theme-text: #e7eefb;
    --theme-muted: #a5b5d0;
    --theme-accent: #7399e8;
    --theme-accent-hover: #91b1f5;
    --theme-accent-text: #101b31;
    --theme-accent-link: #a9c2ff;
    --theme-accent-border: #6688cf;
    --theme-modal-backdrop: rgba(7, 16, 35, 0.88);
}

body[data-color-theme="forest"] {
    --theme-page: #12201c;
    --theme-glow-one: rgba(75, 130, 98, 0.2);
    --theme-glow-two: rgba(38, 78, 60, 0.35);
    --theme-surface-strong: #142820;
    --theme-surface: #193329;
    --theme-surface-muted: #254637;
    --theme-border: #486b56;
    --theme-text: #e6f4e7;
    --theme-muted: #a9c7ad;
    --theme-accent: #83bf8c;
    --theme-accent-hover: #a1d5a9;
    --theme-accent-text: #142b1a;
    --theme-accent-link: #b4e7ba;
    --theme-accent-border: #72a97a;
    --theme-modal-backdrop: rgba(7, 27, 18, 0.88);
}

body[data-color-theme="plum"] {
    --theme-page: #21182a;
    --theme-glow-one: rgba(123, 81, 151, 0.24);
    --theme-glow-two: rgba(74, 45, 92, 0.35);
    --theme-surface-strong: #2a1e35;
    --theme-surface: #342440;
    --theme-surface-muted: #493253;
    --theme-border: #70557b;
    --theme-text: #f2e9f5;
    --theme-muted: #c5afcc;
    --theme-accent: #c28acb;
    --theme-accent-hover: #d6a8dc;
    --theme-accent-text: #351b3d;
    --theme-accent-link: #e0b9e5;
    --theme-accent-border: #ad78b8;
    --theme-modal-backdrop: rgba(34, 12, 42, 0.88);
}

body.theme-light [class*="bg-slate-950"], body[data-color-theme] [class*="bg-slate-950"] { background-color: var(--theme-surface-strong) !important; }
body.theme-light [class*="bg-slate-900"], body[data-color-theme] [class*="bg-slate-900"] { background-color: var(--theme-surface) !important; }
body.theme-light [class*="bg-slate-800"], body[data-color-theme] [class*="bg-slate-800"] { background-color: var(--theme-surface-muted) !important; }
body.theme-light [class*="border-slate-"], body[data-color-theme] [class*="border-slate-"] { border-color: var(--theme-border) !important; }
body.theme-light [class*="text-slate-100"], body.theme-light [class*="text-slate-200"], body.theme-light [class*="text-slate-300"], body[data-color-theme] [class*="text-slate-100"], body[data-color-theme] [class*="text-slate-200"], body[data-color-theme] [class*="text-slate-300"], body.theme-light .text-white, body[data-color-theme] .text-white { color: var(--theme-text) !important; }
body.theme-light [class*="text-slate-400"], body.theme-light [class*="text-slate-500"], body.theme-light [class*="text-slate-600"], body[data-color-theme] [class*="text-slate-400"], body[data-color-theme] [class*="text-slate-500"], body[data-color-theme] [class*="text-slate-600"] { color: var(--theme-muted) !important; }
body.theme-light [class*="text-indigo-"], body[data-color-theme] [class*="text-indigo-"] { color: var(--theme-accent-link) !important; }
body.theme-light [class*="text-rose-"],
body.theme-light [class*="text-emerald-"],
body.theme-light [class*="text-amber-"],
body.theme-light [class*="text-sky-"],
body.theme-light [class*="text-blue-"] { color: #382d1d !important; }
body[data-color-theme="midnight"] [class*="text-rose-"],
body[data-color-theme="midnight"] [class*="text-emerald-"],
body[data-color-theme="midnight"] [class*="text-amber-"],
body[data-color-theme="midnight"] [class*="text-sky-"],
body[data-color-theme="midnight"] [class*="text-blue-"],
body[data-color-theme="forest"] [class*="text-rose-"],
body[data-color-theme="forest"] [class*="text-emerald-"],
body[data-color-theme="forest"] [class*="text-amber-"],
body[data-color-theme="forest"] [class*="text-sky-"],
body[data-color-theme="forest"] [class*="text-blue-"],
body[data-color-theme="plum"] [class*="text-rose-"],
body[data-color-theme="plum"] [class*="text-emerald-"],
body[data-color-theme="plum"] [class*="text-amber-"],
body[data-color-theme="plum"] [class*="text-sky-"],
body[data-color-theme="plum"] [class*="text-blue-"] { color: #f8fafc !important; }
body.theme-light [class*="border-indigo-"], body[data-color-theme] [class*="border-indigo-"] { border-color: var(--theme-accent-border) !important; }
body.theme-light [class*="bg-indigo-600"], body.theme-light [class*="bg-indigo-500"], body[data-color-theme] [class*="bg-indigo-600"], body[data-color-theme] [class*="bg-indigo-500"] { background-color: var(--theme-accent) !important; color: var(--theme-accent-text) !important; }
body.theme-light [class*="hover:bg-indigo-"]:hover, body[data-color-theme] [class*="hover:bg-indigo-"]:hover { background-color: var(--theme-accent-hover) !important; }
body.theme-light .bg-gradient-to-r, body[data-color-theme] .bg-gradient-to-r { background-image: linear-gradient(to right, var(--theme-accent-link), var(--theme-accent)) !important; }
body.theme-light .bg-clip-text, body[data-color-theme] .bg-clip-text { -webkit-background-clip: text !important; background-clip: text !important; }
body.theme-light [class*="shadow-indigo-"], body[data-color-theme] [class*="shadow-indigo-"] { --tw-shadow-color: var(--theme-accent) !important; }
body.theme-light input, body.theme-light textarea, body.theme-light select, body[data-color-theme] input, body[data-color-theme] textarea, body[data-color-theme] select { color: var(--theme-text) !important; }
body.theme-light input::placeholder, body.theme-light textarea::placeholder, body[data-color-theme] input::placeholder, body[data-color-theme] textarea::placeholder { color: var(--theme-muted) !important; }
body.theme-light .story-card-hover-overlay, body[data-color-theme] .story-card-hover-overlay { background-image: linear-gradient(to top, rgba(24, 20, 15, 0.78), rgba(24, 20, 15, 0.2), rgba(24, 20, 15, 0)) !important; }
body.theme-light .gallery-list-title, body.theme-light .image-overlay-title, body[data-color-theme] .gallery-list-title, body[data-color-theme] .image-overlay-title { color: #fffaf0 !important; }
body.theme-light .image-overlay-tag, body[data-color-theme] .image-overlay-tag { color: var(--theme-accent-text) !important; border-color: var(--theme-accent-border) !important; font-weight: 700; }
body.theme-light .story-card-hover-overlay .image-overlay-tag,
body[data-color-theme] .story-card-hover-overlay .image-overlay-tag,
body.theme-light .story-card-hover-overlay .story-overlay-uploader,
body[data-color-theme] .story-card-hover-overlay .story-overlay-uploader,
body.theme-light .story-card-hover-overlay .story-overlay-block,
body[data-color-theme] .story-card-hover-overlay .story-overlay-block {
    color: #ffffff !important;
}
body.theme-light .story-card-hover-overlay .image-overlay-tag,
body[data-color-theme] .story-card-hover-overlay .image-overlay-tag {
    background-color: rgba(32, 24, 13, 0.8) !important;
}
body.theme-light .light-soft-add-btn, body[data-color-theme] .light-soft-add-btn { background-color: var(--theme-accent) !important; border: 1px solid var(--theme-accent-border) !important; color: var(--theme-accent-text) !important; }
body.theme-light .light-soft-add-btn:hover, body[data-color-theme] .light-soft-add-btn:hover { background-color: var(--theme-accent-hover) !important; }
body.theme-light .light-soft-image-btn, body[data-color-theme] .light-soft-image-btn { background-color: var(--theme-surface-muted) !important; border: 1px solid var(--theme-accent-border) !important; color: var(--theme-accent-text) !important; }
body.theme-light .light-soft-tag-btn, body[data-color-theme] .light-soft-tag-btn { background-color: var(--theme-surface-muted) !important; border: 1px solid var(--theme-accent-border) !important; color: var(--theme-accent-link) !important; }
body.theme-light #storyModal,
body.theme-light #uploadGuideModal,
body.theme-light #blockedUploaderModal,
body.theme-light #blockedTagModal,
body[data-color-theme] #storyModal,
body[data-color-theme] #uploadGuideModal,
body[data-color-theme] #blockedUploaderModal,
body[data-color-theme] #blockedTagModal {
    background-color: var(--theme-modal-backdrop) !important;
}

.popular-tag-link.hidden {
    display: none !important;
}