/* ═══════════════════════════════════════════════════════════
   ETUDE — Menu Themes (Location Moods)
   11 diegetic themes, each a world atmosphere from
   docs/locations-and-world.md. Selector: html[data-menu-theme="X"].
   Tokens consumed by pause-menu.css, menu.css, theme-picker.js.
   ═══════════════════════════════════════════════════════════ */

/* Default theme root — motion tokens shared across all themes.
   Color tokens default to Crossroads (day-one mood). */
:root {
    --menu-skew:            -2deg;
    --menu-ease-spring:     cubic-bezier(0.22, 1.45, 0.36, 1);
    --menu-ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
    --menu-dur-snap:        180ms;
    --menu-dur-wipe:        420ms;
    --menu-dur-cursor:      240ms;
    --menu-decor-opacity:   0.04;
}


/* ── 1. CROSSROADS — predawn, silver mist, warm gold ── */
/* Dark blue-black base with silver ink and warm gold accents.
   The hour before first light — open, quiet, expectant. */
html[data-menu-theme="crossroads"] {
    --menu-bg:              #0F1622;
    --menu-bg-deep:         #070A12;
    --menu-bg-raised:       #1A2234;
    --menu-backdrop:        rgba(2, 4, 8, 0.82);

    --menu-ink:             #E4EAF0;
    --menu-ink-soft:        #A4B0C4;
    --menu-rule:            #2A3448;

    --menu-accent-hot:       #6B8CB3;
    --menu-accent-hot-soft:  rgba(107, 140, 179, 0.12);
    --menu-accent-hot-edge:  rgba(107, 140, 179, 0.30);
    --menu-accent-hot-glow:  rgba(107, 140, 179, 0.50);
    --menu-accent-gold:      #D4B366;
    --menu-accent-gold-glow: rgba(212, 179, 102, 0.55);
    --menu-accent-cool:      #4A6B8A;
    --menu-cancel:           #D45F5A;
    --menu-cursor-color:     #D4B366;
}


/* ── 2. CARD TABLE — tense, focused, felt green ──── */
html[data-menu-theme="card_table"] {
    --menu-bg:              #1F3326;
    --menu-bg-deep:         #14221A;
    --menu-bg-raised:       #2B4534;
    --menu-backdrop:        rgba(5, 10, 7, 0.80);

    --menu-ink:             #F0E8D0;
    --menu-ink-soft:        #B8B29C;
    --menu-rule:            #4A5D4E;

    --menu-accent-hot:       #4E8A5E;
    --menu-accent-hot-soft:  rgba(78, 138, 94, 0.12);
    --menu-accent-hot-edge:  rgba(78, 138, 94, 0.30);
    --menu-accent-hot-glow:  rgba(78, 138, 94, 0.48);
    --menu-accent-gold:      #B8924D;
    --menu-accent-gold-glow: rgba(184, 146, 77, 0.50);
    --menu-accent-cool:      #6B6870;
    --menu-cancel:           #D4524A;
    --menu-cursor-color:     #B8924D;
}


/* ── 3. HARMONIC SANCTUM — creative warmth ───────── */
html[data-menu-theme="sanctum"] {
    --menu-bg:              #FAEBC6;
    --menu-bg-deep:         #F0D89E;
    --menu-bg-raised:       #FFF6DD;
    --menu-backdrop:        rgba(50, 30, 60, 0.55);

    --menu-ink:             #2A1B2E;
    --menu-ink-soft:        #5A4050;
    --menu-rule:            #D4B888;

    --menu-accent-hot:       #7B4B9E;
    --menu-accent-hot-soft:  rgba(123, 75, 158, 0.10);
    --menu-accent-hot-edge:  rgba(123, 75, 158, 0.26);
    --menu-accent-hot-glow:  rgba(123, 75, 158, 0.40);
    --menu-accent-gold:      #E8A93A;
    --menu-accent-gold-glow: rgba(232, 169, 58, 0.48);
    --menu-accent-cool:      #B5682E;
    --menu-cancel:           #C03A38;
    --menu-cursor-color:     #E8A93A;
}


/* ── 4. LYRA'S CHAMBER — candlelight, intimate ───── */
html[data-menu-theme="lyra"] {
    --menu-bg:              #2A1D14;
    --menu-bg-deep:         #1A110A;
    --menu-bg-raised:       #3A2A1E;
    --menu-backdrop:        rgba(8, 4, 2, 0.82);

    --menu-ink:             #F4E4C4;
    --menu-ink-soft:        #BFA582;
    --menu-rule:            #5A4228;

    --menu-accent-hot:       #D4824A;
    --menu-accent-hot-soft:  rgba(212, 130, 74, 0.12);
    --menu-accent-hot-edge:  rgba(212, 130, 74, 0.32);
    --menu-accent-hot-glow:  rgba(212, 130, 74, 0.55);
    --menu-accent-gold:      #E8B24A;
    --menu-accent-gold-glow: rgba(232, 178, 74, 0.55);
    --menu-accent-cool:      #8F5E2E;
    --menu-cancel:           #C8432A;
    --menu-cursor-color:     #E8B24A;
    --menu-decor-opacity:   0.06;
}


/* ── 5. CONSERVATORY — inspired, flowing ──────────── */
html[data-menu-theme="conservatory"] {
    --menu-bg:              #FBF3DE;
    --menu-bg-deep:         #F0E3BC;
    --menu-bg-raised:       #FFF9EA;
    --menu-backdrop:        rgba(40, 25, 55, 0.50);

    --menu-ink:             #2D1E38;
    --menu-ink-soft:        #5C4565;
    --menu-rule:            #D4BC96;

    --menu-accent-hot:       #8B4FB5;
    --menu-accent-hot-soft:  rgba(139, 79, 181, 0.10);
    --menu-accent-hot-edge:  rgba(139, 79, 181, 0.26);
    --menu-accent-hot-glow:  rgba(139, 79, 181, 0.42);
    --menu-accent-gold:      #CC8144;
    --menu-accent-gold-glow: rgba(204, 129, 68, 0.48);
    --menu-accent-cool:      #D4841F;
    --menu-cancel:           #B8322A;
    --menu-cursor-color:     #CC8144;
}


/* ── 6. PROVING GROUNDS — dangerous, electric ─────── */
html[data-menu-theme="proving"] {
    --menu-bg:              #1E2025;
    --menu-bg-deep:         #12141A;
    --menu-bg-raised:       #2B2E36;
    --menu-backdrop:        rgba(4, 5, 8, 0.85);

    --menu-ink:             #ECE4D8;
    --menu-ink-soft:        #A8A090;
    --menu-rule:            #4A4C54;

    --menu-accent-hot:       #D84A22;
    --menu-accent-hot-soft:  rgba(216, 74, 34, 0.12);
    --menu-accent-hot-edge:  rgba(216, 74, 34, 0.34);
    --menu-accent-hot-glow:  rgba(216, 74, 34, 0.55);
    --menu-accent-gold:      #D4B340;
    --menu-accent-gold-glow: rgba(212, 179, 64, 0.50);
    --menu-accent-cool:      #4E6473;
    --menu-cancel:           #FFFFFF;
    --menu-cursor-color:     #D4B340;
}


/* ── 7. STILL POINT — serene, lethal, snow ────────── */
html[data-menu-theme="stillpoint"] {
    --menu-bg:              #F2F5F8;
    --menu-bg-deep:         #DFE5EC;
    --menu-bg-raised:       #FFFFFF;
    --menu-backdrop:        rgba(60, 70, 85, 0.48);

    --menu-ink:             #1C2028;
    --menu-ink-soft:        #4E5866;
    --menu-rule:            #BDC5D0;

    --menu-accent-hot:       #D45579;
    --menu-accent-hot-soft:  rgba(212, 85, 121, 0.10);
    --menu-accent-hot-edge:  rgba(212, 85, 121, 0.26);
    --menu-accent-hot-glow:  rgba(212, 85, 121, 0.40);
    --menu-accent-gold:      #D4B062;
    --menu-accent-gold-glow: rgba(212, 176, 98, 0.45);
    --menu-accent-cool:      #6A8AA4;
    --menu-cancel:           #B03A4A;
    --menu-cursor-color:     #D45579;
}


/* ── 8. POSEIDON'S DOMAIN — ancient, powerful ─────── */
html[data-menu-theme="poseidon"] {
    --menu-bg:              #12181E;
    --menu-bg-deep:         #080C10;
    --menu-bg-raised:       #1C242B;
    --menu-backdrop:        rgba(2, 4, 6, 0.85);

    --menu-ink:             #D8E4E0;
    --menu-ink-soft:        #7F9A94;
    --menu-rule:            #2E4048;

    --menu-accent-hot:       #2F8896;
    --menu-accent-hot-soft:  rgba(47, 136, 150, 0.12);
    --menu-accent-hot-edge:  rgba(47, 136, 150, 0.30);
    --menu-accent-hot-glow:  rgba(47, 136, 150, 0.48);
    --menu-accent-gold:      #B89A45;
    --menu-accent-gold-glow: rgba(184, 154, 69, 0.50);
    --menu-accent-cool:      #3C3E3F;
    --menu-cancel:           #D4594A;
    --menu-cursor-color:     #B89A45;
}


/* ── 9. ECHOHAVEN — haunting, melancholy ──────────── */
html[data-menu-theme="echohaven"] {
    --menu-bg:              #1C1526;
    --menu-bg-deep:         #110C17;
    --menu-bg-raised:       #261C34;
    --menu-backdrop:        rgba(6, 3, 10, 0.85);

    --menu-ink:             #E8DCF0;
    --menu-ink-soft:        #9A8AAE;
    --menu-rule:            #3A2E4A;

    --menu-accent-hot:       #8F5AC4;
    --menu-accent-hot-soft:  rgba(143, 90, 196, 0.12);
    --menu-accent-hot-edge:  rgba(143, 90, 196, 0.32);
    --menu-accent-hot-glow:  rgba(143, 90, 196, 0.50);
    --menu-accent-gold:      #D4C490;
    --menu-accent-gold-glow: rgba(212, 196, 144, 0.48);
    --menu-accent-cool:      #5A8AC4;
    --menu-cancel:           #D44A5A;
    --menu-cursor-color:     #D4C490;
}


/* ── 10. ECHO'S GROVE — mystical, alive ───────────── */
html[data-menu-theme="echo_grove"] {
    --menu-bg:              #1B281E;
    --menu-bg-deep:         #0E1610;
    --menu-bg-raised:       #253A2B;
    --menu-backdrop:        rgba(4, 8, 5, 0.82);

    --menu-ink:             #E0EEDF;
    --menu-ink-soft:        #95B09A;
    --menu-rule:            #334A3B;

    --menu-accent-hot:       #3FA89D;
    --menu-accent-hot-soft:  rgba(63, 168, 157, 0.12);
    --menu-accent-hot-edge:  rgba(63, 168, 157, 0.32);
    --menu-accent-hot-glow:  rgba(63, 168, 157, 0.50);
    --menu-accent-gold:      #E8D567;
    --menu-accent-gold-glow: rgba(232, 213, 103, 0.60);
    --menu-accent-cool:      #2F6B3F;
    --menu-cancel:           #D4594A;
    --menu-cursor-color:     #E8D567;
}


/* ── 11. SONG TREE — verdant, luminous ────────────── */
html[data-menu-theme="song_tree"] {
    --menu-bg:              #F5EED6;
    --menu-bg-deep:         #E8DDB5;
    --menu-bg-raised:       #FFFAEA;
    --menu-backdrop:        rgba(45, 30, 50, 0.50);

    --menu-ink:             #1F2E1E;
    --menu-ink-soft:        #4A5D45;
    --menu-rule:            #C4B885;

    --menu-accent-hot:       #4A8B3F;
    --menu-accent-hot-soft:  rgba(74, 139, 63, 0.10);
    --menu-accent-hot-edge:  rgba(74, 139, 63, 0.28);
    --menu-accent-hot-glow:  rgba(74, 139, 63, 0.45);
    --menu-accent-gold:      #E8C340;
    --menu-accent-gold-glow: rgba(232, 195, 64, 0.58);
    --menu-accent-cool:      #5F4A7A;
    --menu-cancel:           #B8322A;
    --menu-cursor-color:     #E8C340;
}