/* Sylvaria shared base styles — included by all Sylvaria pages */

:root {
  --bg:#060608; --bg-panel:#0a0a0e; --bg-card:#0f0f14; --bg-hover:#141420;
  --border:#1e1e2a; --border-glow:#3a2a4a;
  --bone:#c8b89a; --bone-dk:#8a7a62; --bone-lt:#e8d8b8;
  --blood:#8b1a1a; --void:#4a2080; --ember:#c85000;
  --root:#2d5a20; --stone:#5a5a6a; --shadow:#1a1a2a; --tide:#1a4a6a;
  --text:#d8d0c8; --text-muted:#8a8278; --text-dim:#4a4440;
}
[data-theme="light"] {
  --bg:          #f2ece0;
  --bg-panel:    #ebe3d2;
  --bg-card:     #faf6ee;
  --bg-hover:    #f0e8d8;
  --border:      #d4c4a8;
  --border-glow: #b09870;
  --bone:        #6a5a42;
  --bone-dk:     #4a3c2c;
  --bone-lt:     #2a1e10;
  --text:        #2a2018;
  --text-muted:  #6a5a46;
  --text-dim:    #a09078;
}
[data-theme="light"] .site-nav { background: rgba(242,236,224,.93); }

.theme-btn {
  background: transparent;
  border: 1px solid var(--border-glow);
  color: var(--bone-dk);
  width: 30px; height: 30px;
  border-radius: 50%;
  cursor: pointer;
  font-size: .8rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s, border-color 0.2s;
  margin-left: auto;
}
.theme-btn:hover { background: rgba(200,184,154,.1); border-color: var(--bone-dk); }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--bg); color: var(--text); font-family: 'EB Garamond', Garamond, Georgia, serif; font-size: 1.05rem; line-height: 1.7; min-height: 100vh; }

.site-nav { background: var(--bg-panel); border-bottom: 1px solid var(--border); padding: 0.75rem 2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.5rem; position: sticky; top: 0; z-index: 100; }
.site-nav .brand { font-family: 'Cinzel', serif; font-weight: 700; color: var(--bone); text-decoration: none; font-size: 1.1rem; letter-spacing: 0.08em; margin-right: 1rem; }
.site-nav a { color: var(--text-muted); text-decoration: none; font-size: 0.82rem; font-family: 'Cinzel', serif; letter-spacing: 0.06em; text-transform: uppercase; transition: color 0.2s; }
.site-nav a:hover { color: var(--bone); }
.site-nav a.active { color: var(--bone-lt); }

/* Mobile nav (used by pages with hamburger) */
.nav-hamburger { display:none; background:transparent; border:1px solid var(--border-glow); color:var(--bone-dk); width:34px; height:34px; border-radius:4px; cursor:pointer; font-size:1rem; align-items:center; justify-content:center; margin-left:auto; flex-shrink:0; }
.nav-links { display:flex; flex-wrap:wrap; align-items:center; gap:0.25rem 1.5rem; }
@media (max-width: 680px) {
  .site-nav { flex-wrap:nowrap; padding:0.6rem 1rem; }
  .nav-hamburger { display:flex; }
  .nav-links { display:none; position:absolute; top:100%; left:0; right:0; background:var(--bg-panel); border-bottom:1px solid var(--border); padding:0.75rem 1rem 1rem; flex-direction:column; align-items:flex-start; gap:0.65rem; z-index:99; }
  .nav-links.open { display:flex; }
  .theme-btn { margin-left:0; }
}

.page-header { padding: 4rem 2rem 2rem; text-align: center; position: relative; }
.page-header::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(58,42,74,0.2) 0%, transparent 70%); pointer-events: none; }
.page-header .sigil { font-size: 2rem; color: var(--bone-dk); opacity: 0.5; display: block; margin-bottom: 0.75rem; }
.page-header h1 { font-family: 'Cinzel', serif; font-weight: 700; font-size: clamp(2rem, 6vw, 3rem); color: var(--bone-lt); letter-spacing: 0.1em; }
.page-header p { color: var(--bone-dk); font-style: italic; font-size: 1.05rem; max-width: 540px; margin: 0 auto; }

/* Shared path badge (used on lore, codex, standings, cults, etc.) */
.path-badge { display: inline-block; font-size: 0.68rem; font-family: 'Cinzel', serif; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.12rem 0.45rem; border-radius: 3px; }
.path-bone   { background: rgba(200,184,154,0.15); color: var(--bone);   border: 1px solid rgba(200,184,154,0.3); }
.path-root   { background: rgba(45,90,32,0.2);    color: #5a9a40;        border: 1px solid rgba(45,90,32,0.4); }
.path-void   { background: rgba(74,32,128,0.2);   color: #9a70e0;        border: 1px solid rgba(74,32,128,0.4); }
.path-blood  { background: rgba(139,26,26,0.2);   color: #e04040;        border: 1px solid rgba(139,26,26,0.4); }
.path-ember  { background: rgba(200,80,0,0.2);    color: #e07030;        border: 1px solid rgba(200,80,0,0.4); }
.path-stone  { background: rgba(90,90,106,0.2);   color: #9a9aaa;        border: 1px solid rgba(90,90,106,0.4); }
.path-shadow { background: rgba(26,26,42,0.4);    color: #8080a0;        border: 1px solid rgba(80,80,120,0.3); }
.path-tide   { background: rgba(26,74,106,0.2);   color: #4a9aca;        border: 1px solid rgba(26,74,106,0.4); }

footer { border-top: 1px solid var(--border); padding: 2rem; text-align: center; font-size: 0.8rem; color: var(--text-dim); font-family: 'Cinzel', serif; letter-spacing: 0.08em; }
footer span { color: var(--bone-dk); }