/* Three Norse visual directions. Each sets the full token set app.css/crafting.css consume;
   --panel-text/--panel-muted are separate from --text/--muted because Saga Parchment's panels
   are light on a dark page, so panel-interior text needs its own (dark) ink color. */
/* --accent is tuned for use on --bg (the page background, always dark in all three themes).
   --panel-accent is the same signature color re-tuned for use on --panel: identical to --accent
   when the panel is dark (Longhouse/Ironbound), but a darker sepia in Saga, whose panels are a
   light parchment fill and would otherwise put a warm-gold accent on a similarly warm-light field. */
[data-theme="longhouse"]{
 --bg:#1a1310;--panel:#241a14;--panel2:#2c2018;--line:#4a3324;--line2:#33261b;
 --text:#f0e6d2;--muted:#b3a186;--panel-text:#f0e6d2;--panel-muted:#b3a186;
 --accent:#e0a458;--panel-accent:#e0a458;--btn-text:#1a1310;
 --font-display:'Cinzel',Georgia,serif;--font-body:'Crimson Pro',Georgia,serif;
 --page-bg-image:radial-gradient(ellipse 1400px 700px at 50% -10%,#2c1f14 0%,#1a1310 55%);
}
[data-theme="saga"]{
 --bg:#14181a;--panel:#e8dcc0;--panel2:#e2d2a8;--line:#b8a878;--line2:#cbb98e;
 --text:#e5e9df;--muted:#9caaa5;--panel-text:#2b2015;--panel-muted:#6b5a3f;
 --accent:#c9a227;--panel-accent:#8a6a2a;--btn-text:#2b2015;
 --font-display:'Cormorant Garamond',Georgia,serif;--font-body:'EB Garamond',Georgia,serif;
 --page-bg-image:none;
}
[data-theme="ironbound"]{
 --bg:#0a0e10;--panel:#141b1d;--panel2:#182022;--line:#35474a;--line2:#23302f;
 --text:#e6ecec;--muted:#93a3a3;--panel-text:#e6ecec;--panel-muted:#93a3a3;
 --accent:#9fd4d9;--panel-accent:#9fd4d9;--btn-text:#0a0e10;
 --font-display:'Metamorphous',Georgia,serif;--font-body:system-ui,sans-serif;
 --page-bg-image:repeating-linear-gradient(45deg,#ffffff02 0 1px,transparent 1px 5px);
}
body{background-image:var(--page-bg-image,none)}

/* Theme picker: a row of three named pills in the header. */
.themepicker{display:flex;gap:6px;align-items:center;margin-left:24px}
.themepicker button{font:inherit;font-size:11px;letter-spacing:0.5px;padding:6px 12px;border-radius:14px;border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer}
.themepicker button:hover{color:var(--text)}
.themepicker button[aria-pressed="true"]{background:var(--accent);color:var(--btn-text);border-color:var(--accent);font-weight:600}
@media(max-width:900px){.themepicker{margin-left:0;width:100%;justify-content:flex-start;order:3}}

/* Shared rune-knot divider, reused under page heroes. Recolors per theme via currentColor. */
.runedivider{display:flex;align-items:center;gap:12px;margin:0 0 24px;color:var(--accent);opacity:0.75}
.runedivider::before,.runedivider::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,currentColor)}
.runedivider::after{background:linear-gradient(90deg,currentColor,transparent)}