/* ══════════════════════════════════════════════════════
   Shadecrest — Shared Styles (styles.css)
   Used by index.html and roadmap.html
   ══════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root { --transition: 0.3s ease; }

/* ── Default — void-black with violet undertone ────── */
[data-theme="default"] {
  --bg:          #090910;
  --bg-surface:  #0d0b14;
  --bg-card:     #120f1a;
  --bg-card-alt: #16121f;
  --border:      #231f38;
  --border-glow: #352e50;
  --ember:       #b8b0d0;
  --ember-dim:   #9890b8;
  --gold:        #d4af37;
  --gold-dim:    #b8923a;
  --maroon:      #7a2335;
  --maroon-glow: #9b2d43;
  --blood:       #c0392b;
  --bone:        #d8d0ee;
  --bone2:       #9890b8;
  --body:        #c8c0e2;
  --dim:         #7a7298;
  --ash:         #7a3f2e;
  --frost:       #5dade2;
  --plague:      #3dab75;
  --void:        #6c5ce7;
  --shadow:      rgba(0, 0, 0, 0.6);
  --vignette-top: rgba(184,176,208,0.03);
  --vignette-bot: rgba(122,35,53,0.05);
}

/* ── Cracked — parchment, green trim + maroon ──────── */
[data-theme="cracked"] {
  --bg:          #ede2c5;
  --bg-surface:  #e8dcbb;
  --bg-card:     #f0e5c8;
  --bg-card-alt: #e6d8b3;
  --border:      #8c5058;
  --border-glow: #a87080;
  --ember:       #2b6b40;
  --ember-dim:   #3d8a58;
  --gold:        #c9a227;
  --gold-dim:    #a88520;
  --maroon:      #8c1a2a;
  --maroon-glow: #a52238;
  --blood:       #8c1a2a;
  --bone:        #211610;
  --bone2:       #3a2a1c;
  --body:        #312317;
  --dim:         #6b4f2f;
  --ash:         #6e2a14;
  --frost:       #5dade2;
  --plague:      #2a8050;
  --void:        #6c5ce7;
  --shadow:      rgba(0, 0, 0, 0.1);
  --vignette-top: rgba(43,107,64,0.04);
  --vignette-bot: rgba(140,26,42,0.04);
}

/* ── Fractured — charcoal, obsidian + inquisitor red ─ */
[data-theme="fractured"] {
  --bg:          #161618;
  --bg-surface:  #1c1c1f;
  --bg-card:     #1e1e22;
  --bg-card-alt: #222226;
  --border:      #38383e;
  --border-glow: #4a4a52;
  --ember:       #c03030;
  --ember-dim:   #de3a3a;
  --gold:        #d4af37;
  --gold-dim:    #b8923a;
  --maroon:      #991a1a;
  --maroon-glow: #b82020;
  --blood:       #c03030;
  --bone:        #e8e6ea;
  --bone2:       #aaa8b0;
  --body:        #d4d2d8;
  --dim:         #7a7880;
  --ash:         #7a3020;
  --frost:       #5dade2;
  --plague:      #3dab75;
  --void:        #6c5ce7;
  --shadow:      rgba(0, 0, 0, 0.5);
  --vignette-top: rgba(192,48,48,0.04);
  --vignette-bot: rgba(192,48,48,0.03);
}

/* ── Default Light — pale lavender canvas, violet spirit ─ */
[data-theme="default_light"] {
  --bg:          #f2f0f8;
  --bg-surface:  #eae7f4;
  --bg-card:     #f0ecfb;
  --bg-card-alt: #e2dff0;
  --border:      #c0b8dc;
  --border-glow: #d0cce8;
  --ember:       #6050c0;
  --ember-dim:   #7868d8;
  --gold:        #b8922a;
  --gold-dim:    #a07820;
  --maroon:      #7a2335;
  --maroon-glow: #9b2d43;
  --blood:       #c0392b;
  --bone:        #1c1630;
  --bone2:       #48406c;
  --body:        #2c2448;
  --dim:         #6a6090;
  --ash:         #7a3f2e;
  --frost:       #2980b9;
  --plague:      #3dab75;
  --void:        #5848c8;
  --shadow:      rgba(0, 0, 0, 0.08);
  --vignette-top: rgba(96,80,192,0.04);
  --vignette-bot: rgba(122,35,53,0.03);
}

/* ── Cracked Dark — aged tome, green trim + maroon on amber leather ─ */
[data-theme="cracked_dark"] {
  --bg:          #1a1408;
  --bg-surface:  #221a0a;
  --bg-card:     #1e1808;
  --bg-card-alt: #2c220e;
  --border:      #4a3820;
  --border-glow: #5a4a28;
  --ember:       #4aaa6a;
  --ember-dim:   #5abb80;
  --gold:        #c9a227;
  --gold-dim:    #a88520;
  --maroon:      #a02030;
  --maroon-glow: #b82030;
  --blood:       #a02030;
  --bone:        #e8d8a8;
  --bone2:       #c0a868;
  --body:        #d4c08a;
  --dim:         #907840;
  --ash:         #8c1a2a;
  --frost:       #5dade2;
  --plague:      #2a8050;
  --void:        #6c5ce7;
  --shadow:      rgba(0, 0, 0, 0.7);
  --vignette-top: rgba(74,170,106,0.04);
  --vignette-bot: rgba(160,32,48,0.04);
}

/* ── Fractured Light — pale stone, inquisitor red on ash ─ */
[data-theme="fractured_light"] {
  --bg:          #f0eeee;
  --bg-surface:  #e8e6e6;
  --bg-card:     #eeecec;
  --bg-card-alt: #dedddd;
  --border:      #cac4c4;
  --border-glow: #d8d2d2;
  --ember:       #c03030;
  --ember-dim:   #de3a3a;
  --gold:        #c4a030;
  --gold-dim:    #a88520;
  --maroon:      #991a1a;
  --maroon-glow: #b82020;
  --blood:       #c03030;
  --bone:        #1a1818;
  --bone2:       #4a4848;
  --body:        #2c2a2a;
  --dim:         #7a7878;
  --ash:         #7a3020;
  --frost:       #2980b9;
  --plague:      #3dab75;
  --void:        #5c4cd0;
  --shadow:      rgba(0, 0, 0, 0.08);
  --vignette-top: rgba(192,48,48,0.04);
  --vignette-bot: rgba(192,48,48,0.03);
}

body {
  font-family: 'EB Garamond', Georgia, serif;
  background: var(--bg);
  color: var(--bone);
  min-height: 100vh;
  overflow-x: hidden;
  transition: background var(--transition), color var(--transition);
}

/* ── Ambient ────────────────────────────────────────────── */
.vignette {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 0%, var(--vignette-top) 0%, transparent 60%),
              radial-gradient(ellipse at 50% 100%, var(--vignette-bot) 0%, transparent 50%);
  transition: background var(--transition);
}

/* ── Layout ────────────────────────────────────────────── */
.page { position: relative; z-index: 1; }
.container { max-width: 800px; margin: 0 auto; padding: 0 24px; }
section { padding: 48px 0; }
section + section { border-top: 1px solid var(--border); }

.divider {
  width: 60px; height: 1px; margin: 0 auto;
  background: linear-gradient(90deg, transparent, var(--maroon), transparent);
}

/* ── Theme switcher ─────────────────────────────────────── */
.theme-switcher {
  display: block;
  text-align: center;
  margin-top: 24px;
}
.theme-switcher-row {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
}
.theme-pill {
  -webkit-appearance: none;
  appearance: none;
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: 0.1em;
  padding: 6px 16px;
  border: 1px solid var(--border);
  border-radius: 99px;
  background: transparent;
  color: var(--dim);
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}
.theme-pill:hover { border-color: var(--border-glow); color: var(--body); }
.theme-pill.active {
  border-color: var(--ember);
  color: var(--ember);
  background: var(--bg-surface);
}
/* Dark/light toggle — matches the studio site's .theme-toggle */
.theme-mode-toggle {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 140px;
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 9px 24px;
  border: 1px solid var(--border);
  border-radius: 99px;
  background: transparent;
  color: var(--dim);
  cursor: pointer;
  transition: all var(--transition);
}
.theme-mode-toggle:hover { border-color: var(--border-glow); color: var(--body); }
.theme-mode-toggle .icon { font-size: 13px; }

/* ── Footer ────────────────────────────────────────────── */
.footer {
  text-align: center;
  padding: 32px 0;
  border-top: 1px solid var(--border);
}
.footer-text {
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--dim);
}
.footer-links { margin-top: 8px; }
.footer-links a, .footer-links button {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color var(--transition);
}
.footer-links a:hover, .footer-links button:hover { color: var(--gold); }
.footer-links .sep { margin: 0 8px; color: var(--border); }

/* AHEM Studios badge in the footer (logo files live in /assets/brand/) */
.studio-badge {
  display: inline-flex; flex-direction: column; align-items: center; gap: 6px;
  margin: 0 auto 16px; text-decoration: none;
}
.studio-badge span {
  font-family: 'Cinzel', serif; font-size: 9px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--dim); transition: color 0.2s ease;
}
.studio-badge:hover span { color: var(--gold); }
.studio-badge img { display: block; width: 120px; height: auto; }
.studio-badge .logo-light { display: none; }
[data-theme="cracked"] .studio-badge .logo-dark,
[data-theme="default_light"] .studio-badge .logo-dark,
[data-theme="fractured_light"] .studio-badge .logo-dark { display: none; }
[data-theme="cracked"] .studio-badge .logo-light,
[data-theme="default_light"] .studio-badge .logo-light,
[data-theme="fractured_light"] .studio-badge .logo-light { display: block; }


/* ── Shared responsive ─────────────────────────────────── */
@media (max-width: 400px) {
  .container { padding: 0 16px; }
}