/* ============================================================================
   EPITOME KABINETT · Design-Tokens
   Das Wiki als nächtliches Sammlungskabinett: jedes Monster, jede Waffe, jedes
   Item ist ein Exponat auf einem Podest hinter Glas, beschriftet mit einem
   Messingschild, versehen mit Inventarnummer, Provenienz und Belegsiegel.
   Quelle der Grundfarben: die akzeptierten Codex-Viewer (Waffenkammer /
   Bestiarium, Stand 06.09.2026). Alles Weitere baut darauf auf.
   Standard-Modus = Nachtsaal (dunkel). Scope .theme-day = Tagsaal (hell).
   Die Vitrine (3D-Ansicht) bleibt in beiden Modi Nacht.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* --- Schriften ---------------------------------------------------------- */
  --f-display: 'Newsreader', Georgia, Cambria, 'Times New Roman', serif;
  --f-body: 'Source Sans 3', 'Segoe UI', Tahoma, system-ui, sans-serif;
  --f-mono: 'DM Mono', 'Cascadia Mono', Consolas, ui-monospace, monospace;

  /* --- Flächen (Nachtsaal) ----------------------------------------------- */
  --base: #0d1725;          /* Seitengrund */
  --header: #0b1521;        /* Kopfleiste, tiefste Fläche */
  --panel: #101e2e;         /* Register, Schild, Kachel */
  --field: #0c1724;         /* Eingabefelder */
  --raised: #192b3e;        /* Hover, gehobene Fläche */
  --stage: #0e1a28;         /* Arbeitsfläche neben dem Register */

  /* --- Linien ------------------------------------------------------------- */
  --line: #29394a;          /* Standard-Haarlinie 1px */
  --line-soft: #213143;     /* leise Trennlinie */
  --line-strong: #3d5066;   /* betonte Kante, Hover */
  --glass: rgba(191, 207, 226, .06);   /* Glasreflex oben an der Vitrine */

  /* --- Tinte -------------------------------------------------------------- */
  --ink: #e5e9ed;           /* Fließtext, Titel */
  --ink-hi: #f4f6f8;        /* Zahlen, Hervorhebung */
  --muted: #91a0b1;         /* Sekundärtext, Labels */
  --faint: #63768a;         /* Meta, Platzhalter, Fußnoten */

  /* --- Messing (Akzent) ---------------------------------------------------- */
  --brass: #bca477;         /* Akzent, Links, aktive Zustände */
  --brass-bright: #d6c199;  /* Hover, Fokus, Text auf dunkel */
  --brass-deep: #8a713a;    /* Rahmen, Schatten des Schilds */
  --brass-ink: #0b1521;     /* Text AUF Messing */
  --brass-glow: rgba(188, 164, 119, .22);
  --brass-line: rgba(188, 164, 119, .34);

  /* --- Vitrine (bleibt immer Nacht) -------------------------------------- */
  --vitrine-a: #1d324b;
  --vitrine-b: #102035;
  --vitrine-c: #0b1828;
  --vitrine-bg: radial-gradient(ellipse at 50% 42%, var(--vitrine-a), var(--vitrine-b) 70%, var(--vitrine-c));
  --vitrine-line: #2a3b4e;
  --podest: #3a4f6b;
  --podest-rim: rgba(151, 176, 205, .28);
  --vitrine-ink: #91a5b8;   /* Beschriftung in der Vitrine, immer hell */

  /* --- Klassen (kategorial, feste Reihenfolge = Klassenbits 1·2·4·8·16) --- */
  --k-krieger: #cc6349;
  --k-ninja: #7275cc;
  --k-schamanin: #52ab69;
  --k-nekromantin: #9e518f;
  --k-elementalist: #00a1bd;

  /* --- Fraktionen (Designannahme, kein Clientfund) ------------------------ */
  --fr-aria: #e2d4a8;       /* Elfenbeinlicht */
  --fr-zetia: #67a5d9;      /* Stahlblau */

  /* --- Belegskala (Status: immer mit Glyphe + Wort, nie Farbe allein) ----- */
  --s-belegt: #50b584;      /* im Client eindeutig belegt */
  --s-plausibel: #bca477;   /* abgeleitet / plausibel / Fan-Datenbank */
  --s-offen: #63768a;       /* unbestätigt, serverseitig */
  --s-platzhalter: #d46660; /* Test-, Lorem-ipsum-, Platzhalterdaten */

  /* --- Typografie-Skala ---------------------------------------------------- */
  --t-2xs: 10px;  --t-xs: 11px;  --t-sm: 12px;  --t-base: 14px;  --t-md: 16px;
  --t-lg: 18px;   --t-xl: 22px;  --t-2xl: 28px; --t-3xl: 36px;   --t-4xl: 48px;
  --t-5xl: 64px;
  --lh-tight: 1.15; --lh-snug: 1.3; --lh-body: 1.55; --lh-loose: 1.7;
  --track-label: .08em;     /* Versal-Labels */
  --track-display: -.015em;

  /* --- Abstände (4er-Raster) ---------------------------------------------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-8: 32px; --s-10: 40px; --s-14: 56px; --s-20: 80px;

  /* --- Radien (Vitrinenkanten: kantig) ------------------------------------ */
  --r-1: 2px;  --r-2: 3px;  --r-3: 4px;  --r-4: 6px;

  /* --- Schatten (nur für Schwebendes) ------------------------------------- */
  --shadow-pop: 0 18px 40px -20px rgba(0, 0, 0, .75), 0 0 0 1px var(--line);
  --shadow-schild: 0 1px 0 var(--brass-line), inset 0 1px 0 rgba(255, 255, 255, .04);
  --shadow-vitrine: inset 0 0 80px rgba(1, 8, 18, .18);

  /* --- Layout ------------------------------------------------------------- */
  --w-page: 1440px;
  --w-register: 256px;
  --w-prose: 720px;
  --w-schild: 380px;
  --h-topbar: 64px;
  --gutter: 32px;

  /* --- Steuerung ---------------------------------------------------------- */
  --ctl-h: 36px;
  --ctl-h-sm: 30px;
  --icon: 18px;
  --icon-stroke: 1.6;
  --focus: 0 0 0 2px var(--base), 0 0 0 4px var(--brass-bright);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: 160ms;
}

/* ----------------------------------------------------------------------------
   Tagsaal · heller Lesemodus für lange Artikel. Vitrine bleibt Nacht.
   -------------------------------------------------------------------------- */
.theme-day {
  color-scheme: light;
  --base: #f3f2ee;
  --header: #ebe9e3;
  --panel: #ffffff;
  --field: #ffffff;
  --raised: #e6e3db;
  --stage: #f7f6f3;
  --line: #d9d5cb;
  --line-soft: #e6e2d9;
  --line-strong: #b9b3a4;
  --glass: rgba(255, 255, 255, .5);
  --ink: #16202c;
  --ink-hi: #0b1521;
  --muted: #55637a;
  --faint: #8391a5;
  --brass: #725a21;
  --brass-bright: #5c4715;
  --brass-deep: #b59a5f;
  --brass-ink: #ffffff;
  --brass-glow: rgba(114, 90, 33, .14);
  --brass-line: rgba(114, 90, 33, .32);
  --k-krieger: #ae4024;
  --k-ninja: #5554b6;
  --k-schamanin: #298646;
  --k-nekromantin: #853376;
  --k-elementalist: #00829d;
  --fr-aria: #8c5e1a;
  --fr-zetia: #176297;
  --s-belegt: #00774b;
  --s-plausibel: #725a21;
  --s-offen: #8391a5;
  --s-platzhalter: #a83634;
  --shadow-pop: 0 18px 40px -22px rgba(20, 30, 45, .35), 0 0 0 1px var(--line);
  --shadow-schild: 0 1px 0 var(--brass-line), inset 0 1px 0 rgba(255, 255, 255, .8);
  --focus: 0 0 0 2px var(--base), 0 0 0 4px var(--brass);
}

/* ----------------------------------------------------------------------------
   Primitive (winzige Bausteine, die überall gelten)
   -------------------------------------------------------------------------- */
.ep-hairline { border: 0; border-top: 1px solid var(--line); margin: 0; }
.ep-hairline--brass { border-top-color: var(--brass-line); }
.ep-label {                       /* Versal-Label, Mono, für Kicker + Schild-Keys */
  font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 500;
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted);
}
.ep-num { font-variant-numeric: tabular-nums lining-nums; }
.ep-focus:focus-visible, :where(.ep-btn, .ep-input, .ep-select, .ep-chip, a, button, input, select, [tabindex]):focus-visible {
  outline: 0; box-shadow: var(--focus);
}
.ep-icon {
  width: var(--icon); height: var(--icon); flex: 0 0 auto; fill: none;
  stroke: currentColor; stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round;
}
.ep-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { :root { --dur: 0ms; } }