/* WOTAN shared design system -- "neon brutalist," EINHORN_INDUSTRIAL house style.
   One dark identity, no light-mode toggle: this look doesn't have a light variant.
   Sources, all real and already in this monorepo, not invented for this file:
     - purple/black base + pixel-terminal energy: the DEADWEIGHT itch.io storefront art
       direction (founder-provided reference, 2026-09-24)
     - neon accent chips (cyan/orange/red): SHANKPIT's own lobby HUD overlay palette
       (apps/lobby/src/main.c OVERLAY_SCAN/OVERLAY_AI/OVERLAY_COMBAT)
     - warm gold + serif-adjacent restraint: IDUNA's own portal brand (IDUNA/index.html,
       IDUNA/styles.css -- --gold #c6a75e), carried here as the "IDUNA undertone"
   Loaded by every page in this repo via <link rel="stylesheet" href="/css/wotan-theme.css">.
   Page-specific styles (row layouts, tables, card faces, tabs) stay local to each page's own
   <style> block; only the shared tokens + common components (nav, card, button, input, badge,
   msg) live here, to keep five near-identical embedded stylesheets from drifting apart again. */

:root {
  --bg: #0b0518;
  --bg-raise: #160b2c;
  --bg-card: #1b0f36;
  --bg-card-hover: #241442;
  --fg: #f4f0ea;
  --fg-dim: #b6a7d1;
  --border: #3c2760;
  --border-bright: #5b3a94;

  --violet: #9b3ff0;
  --violet-bright: #c07dff;
  --gold: #d8b463;
  --gold-bright: #eecb84;
  --cyan: #52e9ff;
  --orange: #ff9d4d;
  --red: #ff5b53;
  --blue: #5b9dff;
  --ok: #57e6a0;

  --accent: var(--violet);
  --danger: var(--red);
  --good: var(--ok);
  --bad: var(--red);

  --offense: var(--red);
  --operations: var(--orange);
  --defense: var(--blue);

  --shadow: 0 18px 50px rgba(3, 1, 10, .65);
  --glow: 0 0 0 1px color-mix(in srgb, var(--violet-bright) 55%, transparent), 0 0 20px color-mix(in srgb, var(--violet) 45%, transparent);
  --glow-gold: 0 0 0 1px color-mix(in srgb, var(--gold-bright) 55%, transparent), 0 0 20px color-mix(in srgb, var(--gold) 40%, transparent);

  --font-display: "Space Grotesk", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  background:
    radial-gradient(circle at 10% -10%, color-mix(in srgb, var(--violet) 24%, transparent), transparent 42%),
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--gold) 10%, transparent), transparent 38%),
    var(--bg);
  background-attachment: fixed;
  color: var(--fg);
  line-height: 1.6;
}
a { color: var(--violet-bright); text-decoration: none; }
a:hover { text-decoration: underline; }
a.back { color: var(--violet-bright); }
button { font: inherit; color: inherit; }

.wrap { max-width: 640px; margin: 0 auto; padding: 3rem 1.5rem 6rem; }
.wrap.wide { max-width: 1100px; }

/* ---- shared top nav, every page ---- */
.topbar {
  border-bottom: 2px solid var(--border);
  background: color-mix(in srgb, var(--bg-raise) 94%, black 6%);
  position: sticky; top: 0; z-index: 20;
}
.topbar-in { max-width: 1100px; margin: 0 auto; padding: .8rem 1.25rem; display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.brand {
  font-family: var(--font-display); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg); text-decoration: none; display: flex; align-items: baseline; gap: .5rem;
  text-shadow: 0 0 16px color-mix(in srgb, var(--violet) 55%, transparent);
}
.brand:hover { text-decoration: none; }
.brand small { color: var(--fg-dim); font-weight: 500; letter-spacing: .08em; font-size: .68em; text-shadow: none; }
nav.site-nav { display: flex; gap: .25rem; flex-wrap: wrap; flex: 1; font-family: var(--font-display); font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; }
nav.site-nav a { color: var(--fg-dim); padding: .4rem .75rem; border-radius: 8px; }
nav.site-nav a:hover { background: var(--bg-card-hover); color: var(--fg); text-decoration: none; }
nav.site-nav a[aria-current="page"] { color: var(--bg); background: var(--gold); }
.signin {
  border: 1px dashed var(--border-bright); background: transparent; color: var(--fg-dim);
  border-radius: 8px; padding: .4rem .85rem; font-size: .85rem; font-family: var(--font-display);
  text-transform: uppercase; letter-spacing: .03em; cursor: not-allowed;
}

.wordmark { font-family: var(--font-display); font-size: 1rem; letter-spacing: .12em; color: var(--fg-dim); text-transform: uppercase; }
.wordmark b, .wordmark strong { color: var(--violet-bright); }
h1 {
  font-family: var(--font-display); font-size: 2.4rem; margin: .5rem 0 .25rem;
  line-height: 1.15; letter-spacing: -0.01em;
}
.tagline { font-size: 1.05rem; color: var(--fg-dim); margin-bottom: 1.5rem; }

.status-badge {
  display: inline-block; font-family: var(--font-display); font-size: .76rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--bg); background: var(--gold);
  border-radius: 999px; padding: .25rem .85rem; margin: 1.5rem 0 1rem;
}

.card {
  background: var(--bg-card); border: 2px solid var(--border); border-radius: 12px;
  padding: 1.5rem; margin: 1.5rem 0; transition: border-color .15s;
}
.card:hover { border-color: var(--border-bright); }
.card p { margin: 0 0 .75rem; color: var(--fg-dim); }
.card p:last-child { margin-bottom: 0; }

label {
  display: block; font-size: .78rem; color: var(--fg-dim); text-transform: uppercase;
  letter-spacing: .05em; margin: .75rem 0 .3rem;
}
input, select {
  width: 100%; padding: .55rem .7rem; border-radius: 8px; border: 2px solid var(--border);
  background: var(--bg); color: var(--fg); font-size: .95rem; font-family: var(--font-body);
}
input:focus, select:focus, button:focus-visible {
  outline: 2px solid var(--violet-bright); outline-offset: 1px; border-color: var(--violet-bright);
}

button, .button {
  margin-top: 1rem; padding: .6rem 1.2rem; border-radius: 8px; border: 2px solid var(--violet);
  background: var(--violet); color: #fff; font-weight: 700; cursor: pointer; font-size: .88rem;
  font-family: var(--font-display); letter-spacing: .02em; transition: box-shadow .15s, transform .08s;
  display: inline-block; text-decoration: none;
}
button:hover:not(:disabled), .button:hover { box-shadow: var(--glow); }
button:active:not(:disabled), .button:active { transform: translateY(1px); }
button.secondary, .button.secondary { background: transparent; color: var(--violet-bright); }
button.danger, .button.danger { background: transparent; color: var(--red); border-color: var(--red); }
button.gold, .button.gold { background: var(--gold); border-color: var(--gold); color: var(--bg); }
button.gold:hover:not(:disabled), .button.gold:hover { box-shadow: var(--glow-gold); }
button:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

.badge {
  display: inline-block; font-family: var(--font-display); font-size: .66rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; border-radius: 999px; padding: .15rem .55rem; margin-left: .5rem;
}
.badge.pending { color: var(--fg-dim); border: 1px solid var(--fg-dim); }
.badge.accepted { color: var(--ok); border: 1px solid var(--ok); }
.badge.declined { color: var(--red); border: 1px solid var(--red); }

.msg { font-size: .9rem; margin-top: .75rem; }
.msg.error { color: var(--red); }
.msg.ok { color: var(--ok); }

[hidden] { display: none !important; }


/* ---- Selectable themes (2026-10-15). Default "void" is the :root palette above; the others only
   override tokens, so every page that uses var(--*) re-skins with no per-page edits. Chosen via the
   topbar theme picker (js/wotan-nav.js), stored in localStorage "wotan_theme", applied as
   <html data-theme="...">. The Hearthstone pages keep their own cream skin (wotan-hs.css body.hs). */
html[data-theme="ember"] {
  --bg: #170806; --bg-raise: #240e09; --bg-card: #2c120b; --bg-card-hover: #3a1a0f;
  --fg: #fbeee4; --fg-dim: #d1ad9a; --border: #5c2a18; --border-bright: #8a4224;
  --violet: #e5532d; --violet-bright: #ff8a5c; --gold: #f0b24a; --gold-bright: #ffd27a;
  --shadow: 0 18px 50px rgba(20, 4, 1, .7);
}
html[data-theme="terminal"] {
  --bg: #020a05; --bg-raise: #05150a; --bg-card: #07200f; --bg-card-hover: #0b2d16;
  --fg: #c9ffd9; --fg-dim: #6fb988; --border: #12502a; --border-bright: #1f8a48;
  --violet: #1fd16a; --violet-bright: #5dff9a; --gold: #d6e84a; --gold-bright: #eaff7a;
  --font-body: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --shadow: 0 18px 50px rgba(0, 8, 3, .75);
}
html[data-theme="daylight"] {
  --bg: #f3f1ec; --bg-raise: #ffffff; --bg-card: #ffffff; --bg-card-hover: #f0ece2;
  --fg: #1c1a24; --fg-dim: #5d5870; --border: #d5cfe0; --border-bright: #a99bcb;
  --violet: #6a2fc4; --violet-bright: #8a52e6; --gold: #a6812c; --gold-bright: #8a6a1c;
  --cyan: #0a8aa3; --orange: #c46a12; --red: #c7332c; --blue: #2c63c9; --ok: #17875a;
  --shadow: 0 12px 34px rgba(40, 30, 70, .16);
  color-scheme: light;
}
html[data-theme="daylight"] body {
  background: radial-gradient(circle at 10% -10%, rgba(106, 47, 196, .08), transparent 42%), var(--bg);
}