/* ========================================================
   Palette — sourced from bg-brightness-3.jpeg
   Jazz bar: warm amber lamps, crimson curtains, dark wood
   ======================================================== */
:root {
  --c-void:           #060402;
  --c-black-warm:     #100a04;
  --c-dark-wood:      #1e1008;
  --c-brick:          #2a1408;
  --c-floor:          #3d2010;
  --c-wood-bar:       #4a2e14;
  --c-wood-floor-mid: #6a4020;
  --c-drum:           #c06828;
  --c-brass:          #d4883e;
  --c-lamp-shade:     #d89040;
  --c-lamp-glow:      #f0bc54;
  --c-spotlight:      #f5d080;
  --c-curtain-deep:   #5a100e;
  --c-curtain:        #8a1e1e;
  --c-curtain-hi:     #a02828;
  --c-cream:          #f0e8d0;
  --c-parchment:      #e8d4a8;

  /* Step duration — must match JS STEP_DURATION */
  --bg-step-dur: 200ms;
}

/* ========================================================
   Light theme — bg-brightness-3, dramatic spotlight
   ======================================================== */
[data-theme="light"] {
  --th-body-color:   var(--c-dark-wood);
  --th-header-bg:    rgba(8, 4, 1, 0.74);
  --th-header-color: var(--c-cream);
  --th-nav-color:    var(--c-lamp-shade);
  --th-nav-hover:    var(--c-lamp-glow);
  --th-h2-color:     var(--c-brick);
  --th-card-bg:      rgba(235, 210, 155, 0.90);
  --th-card-border:  rgba(190, 140, 60, 0.50);
  --th-card-color:   var(--c-dark-wood);
  --th-card-sub:     var(--c-floor);
  --th-footer-color: rgba(235, 220, 190, 0.72);
  --th-link-color:   var(--c-drum);
  --th-link-hover:   var(--c-lamp-shade);
}

/* ========================================================
   Dark theme — bg-brightness-0, near-black bar
   ======================================================== */
[data-theme="dark"] {
  --th-body-color:   var(--c-cream);
  --th-header-bg:    rgba(3, 1, 0, 0.84);
  --th-header-color: var(--c-lamp-shade);
  --th-nav-color:    var(--c-lamp-shade);
  --th-nav-hover:    var(--c-lamp-glow);
  --th-h2-color:     var(--c-lamp-shade);
  --th-card-bg:      rgba(10, 5, 1, 0.86);
  --th-card-border:  rgba(100, 50, 8, 0.45);
  --th-card-color:   var(--c-cream);
  --th-card-sub:     var(--c-parchment);
  --th-footer-color: rgba(200, 155, 65, 0.55);
  --th-link-color:   var(--c-lamp-shade);
  --th-link-hover:   var(--c-lamp-glow);
}

/* ========================================================
   Reset & Base
   ======================================================== */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  background-color: black;
}

body {
  font-family: Georgia, 'Times New Roman', serif;
  color: var(--th-body-color);
  background: transparent;
  line-height: 1.7;
  min-height: 100vh;
}

/* ========================================================
   Background layer system
   ======================================================== */
.bg-container {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.bg-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity var(--bg-step-dur) ease-in-out;
}

/*
 * CSS-driven initial background shown before theme.js fires (FOUC prevention).
 * These rules are neutralised by theme.js on DOMContentLoaded by removing
 * the data-init-bg attribute after setting the correct .active class.
 */
[data-init-bg="3"] .bg-layer:nth-child(4) { opacity: 1; }
[data-init-bg="0"] .bg-layer:nth-child(1) { opacity: 1; }

.bg-layer.active {
  opacity: 1;
}

/* ========================================================
   Header & Nav
   ======================================================== */
header {
  background: var(--th-header-bg);
  color: var(--th-header-color);
  padding: 1.5rem 2rem;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  position: relative;
  z-index: 10;
}

header h1 {
  font-size: 1.4rem;
  font-weight: normal;
}

nav {
  margin-top: 0.5rem;
}

nav a {
  color: var(--th-nav-color);
  text-decoration: none;
  margin-right: 1.2rem;
  font-size: 0.95rem;
  transition: color 0.2s;
}

nav a:hover {
  color: var(--th-nav-hover);
}

/* ========================================================
   Main & Typography
   ======================================================== */
main {
  max-width: 720px;
  margin: 2rem auto;
  padding: 0 1.5rem;
  position: relative;
  z-index: 1;
}

h2 {
  font-size: 1.3rem;
  margin-bottom: 1rem;
  color: var(--th-h2-color);
}

p {
  margin-bottom: 1rem;
}

a {
  color: var(--th-link-color);
  transition: color 0.2s;
}

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

/* ========================================================
   Cards
   ======================================================== */
.card {
  background: var(--th-card-bg);
  border: 1px solid var(--th-card-border);
  border-radius: 4px;
  padding: 1.2rem;
  margin-bottom: 1rem;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background 0.3s, border-color 0.3s;
}

.card h3 {
  font-size: 1rem;
  margin-bottom: 0.4rem;
  color: var(--th-card-color);
}

.card p {
  font-size: 0.9rem;
  color: var(--th-card-sub);
  margin-bottom: 0;
}

/* ========================================================
   Footer
   ======================================================== */
footer {
  text-align: center;
  padding: 2rem;
  color: var(--th-footer-color);
  font-size: 0.85rem;
  position: relative;
  z-index: 1;
}

/* ========================================================
   Theme toggle button — fixed bottom-right
   ======================================================== */
.theme-toggle {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 100;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 2px solid var(--c-lamp-glow);
  background: var(--c-lamp-shade);
  color: var(--c-void);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow:
    0 0 14px rgba(216, 144, 64, 0.55),
    0 2px 6px rgba(0, 0, 0, 0.55);
  transition: background 0.2s, box-shadow 0.2s, transform 0.1s;
}

.theme-toggle:hover {
  background: var(--c-lamp-glow);
  box-shadow:
    0 0 22px rgba(240, 188, 84, 0.80),
    0 2px 6px rgba(0, 0, 0, 0.55);
}

.theme-toggle:active {
  transform: scale(0.93);
}

.theme-toggle svg {
  width: 1.2rem;
  height: 1.2rem;
  pointer-events: none;
  display: block;
}

/* Show moon icon in light mode (click → go dark)
   Show sun icon in dark mode (click → go light) */
[data-theme="light"] .icon-sun  { display: none; }
[data-theme="light"] .icon-moon { display: block; }
[data-theme="dark"]  .icon-moon { display: none; }
[data-theme="dark"]  .icon-sun  { display: block; }