/* === 1) Velvet (по умолчанию) === */
:root {
  --bg:#0d0a0b; --bg-soft:#151115; --fg:#e9e6e3; --muted:#b9b2aa;
  --gold:#c6a664; --gold-2:#e2c888; --link:#d9b66f;
}

/* === 2) Noir — строгий тёмный === */
:root[data-theme="noir"] {
  --bg:#0b0b0c; --bg-soft:#121213; --fg:#e8e8ea; --muted:#a8a8ad;
  --gold:#7a7a7a; --gold-2:#cfcfd2; --link:#d0d0d4;
}

/* === 3) Ivory — светлая === */
:root[data-theme="ivory"] {
  --bg:#f7f5f2; --bg-soft:#ffffff; --fg:#1e1b18; --muted:#5e5a55;
  --gold:#8b6a2b; --gold-2:#b99032; --link:#6d4f1a;
}

/* === 4) Sepia — ретро === */
:root[data-theme="sepia"] {
  --bg:#f3ece1; --bg-soft:#f7f1e8; --fg:#2a241e; --muted:#6e5f4e;
  --gold:#a37b32; --gold-2:#c29a4e; --link:#7a5222;
}

/* === 5) Poster — яркий афишный === */
:root[data-theme="poster"] {
  --bg:#0c0c12; --bg-soft:#121225; --fg:#f2f2f8; --muted:#a9a9c6;
  --gold:#ff3b3b; --gold-2:#ff8b3b; --link:#62a0ff;
}

/* === 6) Modern — стекло-морфизм === */
:root[data-theme="modern"] {
  --bg:#0b1014; --bg-soft:rgba(255,255,255,.06); --fg:#e9f0f6; --muted:#a6b2bd;
  --gold:#7bd4ff; --gold-2:#bfe8ff; --link:#9dd8ff;
}

/* === 7) ШИМА-ПЕРЕОПРЕДЕЛЕНИЯ (перебивают styles.css) === */
html, body {
  background: var(--bg) !important;
  color: var(--fg) !important;
}
a { color: var(--link) !important; }
a:hover { color: var(--gold-2) !important; }

header {
  background: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.65)) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 35%, transparent) !important;
}

.hero {
  background:
    radial-gradient(900px 380px at 50% 0%, color-mix(in srgb, var(--gold) 25%, transparent), transparent 70%),
    linear-gradient(180deg, rgba(0,0,0,.6), rgba(0,0,0,.2)) !important;
  color: var(--fg) !important;
}

.card, .media, .contact {
  background: linear-gradient(180deg, var(--bg-soft), color-mix(in srgb, var(--bg) 85%, black)) !important;
  border:1px solid color-mix(in srgb, var(--gold) 18%, transparent) !important;
  color: var(--fg) !important;
}

.btn {
  color: var(--gold) !important;
  border-color: color-mix(in srgb, var(--gold) 50%, transparent) !important;
  background: color-mix(in srgb, var(--gold) 8%, transparent) !important;
}
.btn:hover {
  background: color-mix(in srgb, var(--gold) 14%, transparent) !important;
}

.badge {
  color: var(--gold) !important;
  border-color: color-mix(in srgb, var(--gold) 60%, transparent) !important;
  background: color-mix(in srgb, var(--bg-soft) 65%, transparent) !important;
}

footer {
  border-top:1px solid color-mix(in srgb, var(--gold) 25%, transparent) !important;
  color: var(--muted) !important;
}