/* ═══════════════════════════════════════════════
   SELECTABLE COLOR THEMES
   Ethiopian Hymnal Song Book

   Each theme overrides the same CSS custom properties
   already used by neu-theme.css / song-view.css / the
   inline <style> blocks on login.php & register.php, so
   no per-page markup changes are needed to re-skin them.
   Applied via <html data-theme="...">, set by theme-switcher.js.
   ═══════════════════════════════════════════════ */

/* Local Amharic font, used ahead of the Google-hosted
   "Noto Sans Ethiopic" fallback wherever that font is referenced. */
@font-face {
    font-family: "Power Geez Unicode1";
    src: url("../fonts/PGUNICODE1.TTF") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    /* Restrict to the Ethiopic block so this font never substitutes its own
       Latin glyphs into mixed Amharic/English labels — Latin characters keep
       falling through to the Cormorant Garamond / Noto Sans Ethiopic that
       follow it in each font-family stack. */
    unicode-range: U+1200-137F, U+1380-139F, U+2D80-2DDF, U+AB00-AB2F;
}

html[data-theme="parchment"] {
    --bg:             #f2e8d5;
    --bg-light:       #faf3e4;
    --bg-dark:        #e3d4b5;
    --shadow-light:   #fffaf0;
    --shadow-dark:    rgba(120, 90, 50, 0.28);
    --accent:         #6b4423;
    --accent-dark:    #4a2f18;
    --accent-light:   #8a5a34;
    --accent-glow:    rgba(107, 68, 35, 0.15);
    --text-on-accent: #FFF8EE;
    --text-dark:      #3a2a1a;
    --text-mid:       #5c4630;
    --text-light:     #6f5a40;
    --chorus-bg:      #e8dcc0;
}

html[data-theme="midnight"] {
    --bg:             #161b22;
    --bg-light:       #1e242c;
    --bg-dark:        #0d1117;
    --shadow-light:   rgba(255, 255, 255, 0.05);
    --shadow-dark:    rgba(0, 0, 0, 0.6);
    --accent:         #d4af37;
    --accent-dark:    #b8912a;
    --accent-light:   #e8c766;
    --accent-glow:    rgba(212, 175, 55, 0.2);
    --text-on-accent: #1a1305;
    --text-dark:      #eef0f2;
    --text-mid:       #c3c9d1;
    --text-light:     #8891a0;
    --chorus-bg:      #262d38;
}

html[data-theme="emerald"] {
    --bg:             #e3efe6;
    --bg-light:       #f0f8f2;
    --bg-dark:        #cfe3d4;
    --shadow-light:   #f7fdf9;
    --shadow-dark:    rgba(60, 110, 80, 0.3);
    --accent:         #1f5c3f;
    --accent-dark:    #12402a;
    --accent-light:   #2f7a54;
    --accent-glow:    rgba(31, 92, 63, 0.15);
    --text-on-accent: #FFFFFF;
    --text-dark:      #16281d;
    --text-mid:       #33473a;
    --text-light:     #4f6358;
    --chorus-bg:      #d0e7d6;
}

html[data-theme="rose"] {
    --bg:             #f6e4e6;
    --bg-light:       #fbf0f1;
    --bg-dark:        #e9cdd1;
    --shadow-light:   #fff6f7;
    --shadow-dark:    rgba(160, 80, 90, 0.28);
    --accent:         #7a2e3a;
    --accent-dark:    #591f28;
    --accent-light:   #9a4552;
    --accent-glow:    rgba(122, 46, 58, 0.15);
    --text-on-accent: #FFF3F4;
    --text-dark:      #3a1418;
    --text-mid:       #5c2a2f;
    --text-light:     #7d5257;
    --chorus-bg:      #ecd3d6;
}

/* ── Floating theme-switcher widget (injected by theme-switcher.js) ── */
.theme-fab {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 9999;
    font-family: 'Power Geez Unicode1', 'Cormorant Garamond', serif;
}

.theme-fab-btn {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    color: var(--accent);
    box-shadow: 4px 4px 10px var(--shadow-dark), -4px -4px 10px var(--shadow-light);
    transition: transform 0.2s ease;
}

.theme-fab-btn:hover { transform: scale(1.08); }

.theme-popover {
    position: absolute;
    right: 0;
    bottom: 64px;
    width: 220px;
    padding: 0.9rem;
    border-radius: 14px;
    background: var(--bg);
    box-shadow: 6px 6px 14px var(--shadow-dark), -6px -6px 14px var(--shadow-light);
    display: none;
    flex-direction: column;
    gap: 0.5rem;
}

.theme-popover.open { display: flex; }

.theme-popover-title {
    font-size: 0.8rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-light);
    margin-bottom: 0.2rem;
}

.theme-option {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.6rem;
    border-radius: 10px;
    cursor: pointer;
    border: none;
    background: transparent;
    color: var(--text-dark);
    font-family: 'Power Geez Unicode1', 'Cormorant Garamond', serif;
    font-size: 1rem;
    text-align: left;
    transition: background 0.15s ease;
}

.theme-option:hover { background: var(--bg-dark); }

.theme-option.active {
    background: var(--bg-dark);
    font-weight: 700;
    color: var(--accent);
}

.theme-swatch {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1.5px rgba(0,0,0,0.15);
}

@media print {
    .theme-fab { display: none; }
}
