/* ==========================================================================
   LPH Theme Engine — structural layer.
   The per-theme design-token blocks (:root[data-theme="…"]) are generated
   from resources/themes/*.php by App\Support\ThemeRegistry and injected inline
   in the page head (see partials/theme-head). This file holds only the
   theme-independent plumbing: legacy --lph-*/--gold/--surface-* aliases onto
   the semantic tokens, themed scrollbars, focus, and switcher styles.
   Load AFTER the lph-* system layers (base → components → utilities →
   portal → responsive).
   ========================================================================== */
/* --------------------------------------------------------------------------
   Legacy aliases → semantic tokens. Everything already written against
   --lph-* / --gold / --border / --surface-* / --text-* now follows the theme.
   -------------------------------------------------------------------------- */
:root {
    --lph-bg-base: var(--color-background);
    --lph-bg-elevated: var(--color-elevated);
    --lph-surface-1: var(--color-surface);
    --lph-surface-2: var(--color-surface-secondary);
    --lph-surface-3: var(--color-surface-veil);
    --lph-surface-4: var(--color-surface-hover);

    --lph-border-soft: var(--color-border);
    --lph-border-gold: var(--color-border-strong);
    --lph-border-gold-strong: var(--color-border-strong);

    --lph-text-primary: var(--color-text);
    --lph-text-secondary: var(--color-text-secondary);
    --lph-text-muted: var(--color-text-muted);
    --lph-text-gold: var(--color-primary-strong);

    --lph-gold: var(--color-primary);
    --lph-gold-soft: var(--color-primary-soft);
    --lph-shadow-main: var(--shadow-elevated);

    --gold: var(--color-primary);
    --gold-soft: var(--color-primary-soft);
    --border: var(--color-border);
    --surface-1: var(--color-surface);
    --surface-2: var(--color-surface-secondary);
    --surface-3: var(--color-surface-veil);
    --text-primary: var(--color-text);
    --text-secondary: var(--color-text-secondary);
    --text-muted: var(--color-text-muted);
    --text-gold: var(--color-primary-strong);
}

/* Themed scrollbars + smooth theme transition on large surfaces. */
* {
    scrollbar-color: var(--color-scrollbar-thumb) var(--color-scrollbar-track);
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--color-scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--color-scrollbar-thumb); border-radius: 6px; }

html, body { transition: background-color .2s ease, color .2s ease; }

/* Theme switcher control */
.lph-theme-switch { margin: 0; }
.lph-theme-switch-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}
.lph-theme-switch-btn:hover { background: var(--color-surface-hover); border-color: var(--color-border-strong); }
.lph-theme-switch-btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.lph-theme-switch-label { letter-spacing: .01em; }
@media (max-width: 640px) { .lph-theme-switch-label { display: none; } }

.lph-theme-switch-select {
    width: 100%;
    padding: 6px 10px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}
.lph-theme-switch-select:hover { border-color: var(--color-border-strong); }
.lph-theme-switch-select:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.lph-theme-switch-select option { background: var(--color-elevated); color: var(--color-text); }