/* =========================================================
   Global color system – overrides Lychee defaults
   ========================================================= */
:root {
    --bg-main: #050506;
    --bg-alt: #0c0d10;
    --bg-card: #111218;

    --accent: #ffd54a;
    --accent-soft: rgba(255, 213, 74, 0.18);

    --text-main: #f7f7f7;
    --text-muted: #a5a5ad;

    --border-subtle: #2a2a30;

    --danger: #ff5c5c;
    --success: #9bdc65;

    --shadow-soft: 0 18px 40px rgba(0, 0, 0, 0.7);

    --radius-lg: 18px;
    --radius-pill: 999px;

    --transition-fast: 0.2s ease;
}

/* =========================================================
   Base surfaces
   ========================================================= */
body,
#app,
.lychee-container {
    background-color: var(--bg-main);
    color: var(--text-main);
}

.album,
.photo,
.panel,
.card,
.context-menu,
.dropdown-menu {
    background-color: var(--bg-card);
    border-color: var(--border-subtle);
    box-shadow: var(--shadow-soft);
    border-radius: var(--radius-lg);
}

/* =========================================================
   Top bar / side panels
   ========================================================= */
.header,
.topbar,
.sidebar,
.panel-header {
    background-color: var(--bg-alt);
    border-bottom: 1px solid var(--border-subtle);
}

/* =========================================================
   Text
   ========================================================= */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-main);
}

small,
.muted,
.text-muted {
    color: var(--text-muted);
}

/* =========================================================
   Buttons & actions
   ========================================================= */
button,
.btn,
.action {
    background-color: transparent;
    color: var(--text-main);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    transition: var(--transition-fast);
}

button:hover,
.btn:hover,
.action:hover {
    background-color: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}

/* Primary / highlighted actions */
.btn-primary,
.action.primary {
    background-color: var(--accent);
    color: #000;
    border-color: var(--accent);
}

.btn-primary:hover,
.action.primary:hover {
    filter: brightness(1.05);
}

/* =========================================================
   Links & focus
   ========================================================= */
a {
    color: var(--accent);
}

a:hover {
    color: #ffe082;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* =========================================================
   Status colors
   ========================================================= */
.success {
    color: var(--success);
}

.error,
.danger {
    color: var(--danger);
}

/* =========================================================
   Inputs
   ========================================================= */
input,
select,
textarea {
    background-color: var(--bg-alt);
    color: var(--text-main);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-soft);
}

/* =========================================================
   Photo grid hover & selection
   ========================================================= */
.photo:hover,
.album:hover {
    box-shadow: 0 0 0 2px var(--accent-soft);
}

.photo.selected,
.album.selected {
    box-shadow: 0 0 0 2px var(--accent);
}