:root {
--color-primary: #cba529;
--color-primary-dark: #9b7519;
--color-secondary: #1b1529;
--color-accent: #ebc549;
--color-bg: #0b1519;
--color-bg-alt: #1b1529;
--color-bg-elevated: #1b2539;
--color-surface: #2b2549;
--color-text: #fbf5e9;
--color-text-muted: #aba599;
--color-text-inverse: #0b1519;
--color-heading: #fbf5e9;
--color-link: #ebc549;
--color-link-hover: #fbe589;
--color-border: #2b3559;
--color-header-bg: #1b1529;
--color-nav-bg: #0b0519;
--color-footer-bg: #0b0519;
--color-footer-text: #8b8579;
--color-star: #fbc539;
--color-star-empty: #3b4559;
--color-success: #3bb579;
--color-warning: #eba509;
--color-danger: #db5549;
--color-info: #4ba5d9;
--color-badge-bg: #cba529;
--color-badge-text: #1b1519;
--color-hero-overlay: rgba(8, 10, 16, 0.72);
--color-card-bg: #1b2539;
--color-card-border: #2b3549;
--color-table-header: #2b2549;
--color-table-stripe: #1b1529;
--color-btn-bg: #cba529;
--color-btn-text: #1b1519;
--color-btn-hover: #ebb539;
--color-shadow: rgba(0, 0, 0, 0.45);
}

html { scroll-behavior: smooth; }

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  max-width:98vw;
}

a { color: var(--color-link); }
a:hover { color: var(--color-link-hover); }

h1, h2, h3, h4, h5, h6 { color: var(--color-heading); }

.site-header {
  background: var(--color-header-bg);
  border-bottom: 1px solid var(--color-border);
}

.mvd {
  padding-top:27vh!important;
}

.site-nav-2 { background: var(--color-nav-bg); }

.hero-block {
  position: relative;
  background: var(--color-secondary);
  min-height: 280px;
}

.hero-block::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-hero-overlay);
}

.hero-block > * { position: relative; z-index: 1; }

.panel-card {
  background: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  box-shadow: 0 8px 24px var(--color-shadow);
}

.star-on { color: var(--color-star); }
.star-off { color: var(--color-star-empty); }

.chip-badge {
  background: var(--color-badge-bg);
  color: var(--color-badge-text);
}

.cta-btn {
  background: var(--color-btn-bg);
  color: var(--color-btn-text);
  border: 0;
}
.cta-btn:hover {
  background: var(--color-btn-hover);
  color: var(--color-btn-text);
}

.ok-text { color: var(--color-success); }
.warn-text { color: var(--color-warning); }
.bad-text { color: var(--color-danger); }
.info-text { color: var(--color-info); }
.muted-copy { color: var(--color-text-muted); }

.site-footer {
  background: var(--color-footer-bg);
  color: var(--color-footer-text);
}

.table-darkish {
  --bs-table-bg: var(--color-bg-alt);
  --bs-table-striped-bg: var(--color-table-stripe);
  --bs-table-color: var(--color-text);
  --bs-table-color-state: var(--color-text);
  --bs-table-color-type: var(--color-text);
  border-color: var(--color-border);
}

.table-darkish thead th {
  background: var(--color-table-header);
  color: var(--color-heading);
}

.section-alt { background: var(--color-bg-alt); }
.section-elevated { background: var(--color-bg-elevated); }

.img-frame {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  max-width:96vw;
}

.divider-gold {
  height: 3px;
  background: var(--color-primary);
  border: 0;
}

/* small look shifts per version, DOM stays unique in the HTML files */
body[data-version="1"] .hero-block { min-height: 320px; }
body[data-version="2"] .panel-card { border-radius: 1.25rem; }
body[data-version="3"] h2 { letter-spacing: 0.04em; }
body[data-version="4"] .cta-btn { border-radius: 2rem; }
body[data-version="5"] .site-header { border-bottom-width: 3px; border-bottom-color: var(--color-primary); }