/* Tsukizumi Dark Theme (root) */
body.theme-tsukizumi {
    /* Basic */
    --bg-color: #181818;
    --card-bg: #1e1e1e;
    --text-color: #e0e0e0;
    --primary-color: #cfcfcf;
    --secondary-color: #8fc3bb;
    /* new secondary color */
    --accent-color: #a3d2ca;
    --hint-color: #b5c9c3;
    --muted: #707070;

    /* Input */
    --input-bg: #2a2a2a;
    --input-border: #444444;
    --input-border-focus: rgba(163, 210, 202, 0.4);
    --input-box-shadow: rgba(163, 210, 202, 0.3);
    --placeholder-color: #999999;

    /* Button */
    --button-bg: #242424;
    --button-hover-bg: var(--accent-color);
    --button-hover-color: #181818;

    /* Card */
    --card-gradient-color: rgba(163, 210, 202, 0.02);
    --card-border-color: rgba(163, 210, 202, 0.05);
    --card-shadow-color: rgba(163, 210, 202, 0.05);

    /* Vocab Word */
    --vocab-bg: var(--accent-color);
    --vocab-color: #fff;
    --vocab-hover-bg: rgba(163, 210, 202, 0.85);
    --vocab-hover-color: #fff;
    --vocab-hover-shadow: none;
}

/* Uminami Dark Theme */
body.theme-uminami {
    /* Basic */
    --bg-color: #0a0f14;
    --card-bg: #111a21;
    --text-color: #e0f7fa;
    --primary-color: #4dd0e1;
    --secondary-color: #36b8ca;
    /* new secondary color */
    --accent-color: #26c6da;
    --hint-color: #80deea;
    --muted: #7a8d99;

    /* Input */
    --input-bg: #16222a;
    --input-border: #2a3a47;
    --input-border-focus: rgba(77, 208, 225, 0.3);
    --input-box-shadow: rgba(77, 208, 225, 0.25);
    --placeholder-color: #99b7c4;

    /* Button */
    --button-bg: #1e2b35;
    --button-hover-bg: var(--primary-color);
    --button-hover-color: #0a0f14;

    /* Card */
    --card-gradient-color: rgba(102, 204, 255, 0.02);
    --card-border-color: rgba(102, 204, 255, 0.05);
    --card-shadow-color: rgba(102, 204, 255, 0.05);

    /* Vocab Word */
    --vocab-bg: var(--primary-color);
    --vocab-color: var(--text-color);
    --vocab-hover-bg: var(--accent-color);
    --vocab-hover-color: #fff;
    --vocab-hover-shadow: none;
}

/* Mithril Dark Theme */
body.theme-mithril {
    /* Basic */
    --bg-color: #0a0c14;
    --card-bg: #141823;
    --text-color: #d0d4e0;
    --primary-color: #7f9cf5;
    --secondary-color: #5f7ee5;
    /* new secondary color */
    --accent-color: #5a78d6;
    --hint-color: #8fa3d1;
    --muted: #5a6070;

    /* Input */
    --input-bg: #161a28;
    --input-border: #2c334e;
    --input-border-focus: rgba(127, 156, 245, 0.35);
    --input-box-shadow: rgba(127, 156, 245, 0.3);
    --placeholder-color: #6d7aa0;

    /* Button */
    --button-bg: #1c2033;
    --button-hover-bg: var(--primary-color);
    --button-hover-color: #0a0c14;

    /* Card */
    --card-gradient-color: rgba(127, 156, 245, 0.08);
    --card-border-color: rgba(127, 156, 245, 0.18);
    --card-shadow-color: rgba(90, 120, 214, 0.15);

    /* Vocab Word */
    --vocab-bg: var(--primary-color);
    --vocab-color: var(--text-color);
    --vocab-hover-bg: var(--accent-color);
    --vocab-hover-color: #ffffff;
    --vocab-hover-shadow: none;
}

/* Orange Dark Theme */
body.theme-orange {
    /* Basic */
    --bg-color: #121212;
    --card-bg: #1f1f1f;
    --text-color: #f4f1de;
    --primary-color: #ef8354;
    --secondary-color: #d76f3e;
    /* new secondary color */
    --accent-color: #ffd6a5;
    --hint-color: #f4a261;
    --muted: #8d8d8d;

    /* Input */
    --input-bg: #292929;
    --input-border: #444444;
    --input-border-focus: rgba(239, 131, 84, 0.3);
    --input-box-shadow: rgba(239, 131, 84, 0.3);
    --placeholder-color: #bfbfbf;

    /* Button */
    --button-bg: #3a3a3a;
    --button-hover-bg: var(--primary-color);
    --button-hover-color: #ffffff;

    /* Card */
    --card-gradient-color: rgba(239, 131, 84, 0.05);
    --card-border-color: rgba(239, 131, 84, 0.1);
    --card-shadow-color: rgba(239, 131, 84, 0.12);

    /* Vocab Word */
    --vocab-bg: var(--primary-color);
    --vocab-color: var(--text-color);
    --vocab-hover-bg: #f4a261;
    --vocab-hover-color: #fff;
    --vocab-hover-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
}

/* Violet Night Dark Theme */
body.theme-violet-night {
    /* Basic */
    --bg-color: #0a0a12;
    --card-bg: #151526;
    --text-color: #e0d8ff;
    --primary-color: #9b5de5;
    --secondary-color: #7a3fd6;
    --accent-color: #b06aff;
    --hint-color: #c9a7ff;
    --muted: #6d5d7c;

    /* Input */
    --input-bg: #1b1b33;
    --input-border: #3b3b5c;
    --input-border-focus: rgba(155, 93, 229, 0.4);
    --input-box-shadow: rgba(155, 93, 229, 0.3);
    --placeholder-color: #aaa0c6;

    /* Button */
    --button-bg: #222244;
    --button-hover-bg: var(--primary-color);
    --button-hover-color: #0a0a12;

    /* Card */
    --card-gradient-color: rgba(155, 93, 229, 0.05);
    --card-border-color: rgba(155, 93, 229, 0.1);
    --card-shadow-color: rgba(155, 93, 229, 0.12);

    /* Vocab Word */
    --vocab-bg: var(--primary-color);
    --vocab-color: #fff;
    --vocab-hover-bg: var(--accent-color);
    --vocab-hover-color: #fff;
    --vocab-hover-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
}

/* Forest Twilight Dark Theme */
body.theme-celestial {
    --bg-color: #0b0c1c;
    --card-bg: #141528;
    --text-color: #e2e6f0;
    --primary-color: #5fc3ff;
    --secondary-color: #3a95d9;
    --accent-color: #7fd0ff;
    --hint-color: #99ccff;
    --muted: #6c7180;

    --input-bg: #1a1c2e;
    --input-border: #2f3a55;
    --input-border-focus: rgba(95, 195, 255, 0.4);
    --input-box-shadow: rgba(95, 195, 255, 0.3);
    --placeholder-color: #a0a8c0;

    --button-bg: #1f2233;
    --button-hover-bg: var(--primary-color);
    --button-hover-color: #0b0c1c;

    --card-gradient-color: rgba(95, 195, 255, 0.05);
    --card-border-color: rgba(95, 195, 255, 0.1);
    --card-shadow-color: rgba(95, 195, 255, 0.1);

    --vocab-bg: var(--primary-color);
    --vocab-color: #fff;
    --vocab-hover-bg: var(--accent-color);
    --vocab-hover-color: #fff;
    --vocab-hover-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
}

.theme-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.theme-modal.active {
    display: flex;
}

.theme-box {
    background: var(--card-bg);
    padding: 3rem;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    text-align: center;
    min-height: 360px;
    width: 90%;
    max-width: 500px;
}

.theme-box h2 {
    transform: translateY(-80%);
}

.theme-options {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.theme-option {
    flex: 1 1 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    background: #f9fafb;
    padding: 1rem;
    border: 2px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    font-weight: 600;
    color: #333;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

body.theme-tsukizumi .theme-option,
body.theme-uminami .theme-option,
body.theme-mithril .theme-option,
body.theme-orange .theme-option,
body.theme-sakura .theme-option,
body.theme-forest .theme-option,
body.theme-violet-night .theme-option,
body.theme-celestial .theme-option {
    background: var(--card-bg);
    color: var(--text-color);
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

body.theme-tsukizumi .theme-option:hover,
body.theme-uminami .theme-option:hover,
body.theme-mithril .theme-option:hover,
body.theme-orange .theme-option:hover,
body.theme-sakura .theme-option:hover,
body.theme-forest .theme-option:hover,
body.theme-violet-night .theme-option:hover,
body.theme-celestial .theme-option:hover {
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.05);
    transform: translateY(-5px);
}

.theme-option.selected {
    background: var(--primary-color);
    color: var(--button-hover-color);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
    transition: all 0.3s ease;
}

.theme-swatch {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px #ccc;
}

.theme-swatch.tsukizumi {
    background: linear-gradient(135deg, #000000, #a3d2ca);
}

.theme-swatch.uminami {
    background: linear-gradient(135deg, #000000, #4dd0e1);
}

.theme-swatch.mithril {
    background: linear-gradient(135deg, #000000, #7f9cf5);
}

.theme-swatch.orange {
    background: linear-gradient(135deg, #000000, #ef8354);
}

.theme-swatch.violet-night {
    background: linear-gradient(135deg, #000000, #9b5de5);
}

.theme-swatch.celestial {
    background: linear-gradient(135deg, #000000, #99ccff);
}