/* ════════════════════════════════════════════════════════════════════════ tokens.css — Single Source of Truth (Design-Tokens + Fonts) Lädt als ERSTE CSS-Datei. Definiert die @layer-Reihenfolge global. Regel: kein Magic-Value im restlichen CSS — alles referenziert hier. ════════════════════════════════════════════════════════════════════════ */ /* Cascade-Layer-Reihenfolge — garantiert, egal in welcher Reihenfolge geladen. Spätere Layer gewinnen → kein !important nötig. */ @layer reset, base, layout, components, evpw, utilities; /* ── Self-hosted Fonts (kein CDN → CSP-konform) ──────────────────────────── */ @font-face { font-family: Cinzel; src: url('/fonts/Cinzel-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: Cinzel; src: url('/fonts/Cinzel-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: Cinzel; src: url('/fonts/Cinzel-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } /* Body-Font = Inter (2026-07-13): Raleway war ein geometrischer Display-Font, im langen Fließtext ermüdend (web-belegt „not the best choice for body text"). Inter hat hohe x-Höhe + ist auf Bildschirm- Lauftext optimiert (De-facto-UI/Doku-Standard). woff2 = ~24 KB je Schnitt (Raleway-TTF war ~163 KB). Cinzel (--font-head) bleibt als Marken-Serif für Titel unverändert. */ @font-face { font-family: Inter; src: url('/fonts/Inter-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: Inter; src: url('/fonts/Inter-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: Inter; src: url('/fonts/Inter-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: Inter; src: url('/fonts/Inter-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } :root { /* Dark-only-Site: den Browsern SAGEN, dass sie dunkel rendern sollen (Web-Standard) — sonst zeichnen sie native Widgets (Checkbox-/Date-Picker-Hintergründe, Select-Popups, Scrollbars) im hellen Modus (Befund 2026-07-11: weiße Checkbox im pwdb-Rezept-Import). */ color-scheme: dark; /* ── Hintergrund-Schichten ──────────────────────────────────────────── */ --bg-base: #080b13; --bg-surface: #0d1222; --bg-card: #111826; --bg-card-2: #162035; --bg-hover: #1c2a42; /* ── Akzente ────────────────────────────────────────────────────────── */ --accent: #e8960a; --accent-bright: #ffb030; --accent-glow: rgb(232 150 10 / 15%); --on-accent: #000; /* Schrift/Icon auf Gold-Fill (evpw-btn--primary, Header-Login) */ /* Text-Auswahl (::selection): DECKEND, damit das Markieren über jedem Hintergrund gleich kräftig aussieht (durchscheinendes --accent-glow mischte sich mit dem Untergrund → uneinheitlich/schwach). Klassisches CMS-/Browser-Blau (wie Notion/Docs/Gutenberg). Auf Gold umstellen: hier auf --accent + dunkle Schrift ändern, dann ist es markenfarben. */ --selection-bg: #3b82f6; --selection-fg: #fff; --jade: #4dd9c0; --jade-dim: rgb(77 217 192 / 12%); --violet: #9b7df8; --violet-dim: rgb(155 125 248 / 12%); --danger: #f87171; --danger-dim: rgb(248 113 113 / 12%); --success: #3fb950; --success-dim: rgb(63 185 80 / 12%); --tip-dim: rgb(77 217 192 / 10%); /* ── Admin-UI-Akzente (Rollen/Status/Buttons) ─────────────────────────── Bewusst weichere Töne als die Marken-Akzente oben — für Tabellen, Badges und die evpw-btn-Farbklassen (Rollen/Status). Border via color-mix(… 35%) aus diesen Tokens. */ --c-purple: #b88ee8; --c-cyan: #58a8c8; --c-green: #7cc47c; --c-red: #e07070; --c-amber: #fbbf24; /* bedeutungstragende Caution-Signalfarbe (z. B. „unverifiziert"-Badge) */ /* ── Text ───────────────────────────────────────────────────────────── */ --text-1: #eef2ff; --text-2: #a3adc7; /* Sekundärtext — Kontrast ~8:1 (AAA); vorher #8b95b0 (~6:1, bei Kleintext dünn) */ --text-3: #6b7591; /* Meta/Labels — Kontrast ~3,9:1 (AA); vorher #4e5870 (~2,5:1, fiel durch AA) */ /* ── Linien / Borders ───────────────────────────────────────────────── */ --border: rgb(255 255 255 / 5.5%); --border-accent: rgb(232 150 10 / 25%); /* ── PW-Client-Palette (Gear: Item-Tooltip) ───────────────────────────── ⚠ Diese Werte sind NICHT frei wählbar und dürfen nicht „harmonisiert" werden: sie sind 1:1 Evolveds Client-Palette aus `configs/item_desc.txt` (die 10 Einträge der Item-Tooltip-Farbtabelle) und decken die `^RRGGBB`-Codes der Tooltip-Zeilen ab. Ersetzt die frühere --q-normal/-magic/-rare/-epic/-legend-Reihe: das waren World-of-Warcraft-Farben, nicht PW. ⚠ Die NAMENSFARBE (Rarität) indiziert diese Liste NICHT — jene Zuordnung ist empirisch gemessen und steht in `includes/gear-catalog.php` (EVPW_CATALOG_RARITY_COLORS); sie nutzt u. a. #00ffae, das hier gar nicht vorkommt. Die alte Annahme „Qualitätswert = Index 0-basiert" war falsch. Doku: .project/tasks/pwdata-elements-import.md §21 + §27. */ --pw-q0: #8080ff; /* blau — zugleich die Farbe ALLER Item-Adds im Tooltip */ --pw-q1: #ffdc50; /* gold */ --pw-q2: #aa32ff; /* lila */ --pw-q3: #ff6000; /* orange */ --pw-q4: #fff; /* weiß — zugleich Grundwerte/Voraussetzungen/Preis */ --pw-q5: #b0b0b0; /* grau */ --pw-q6: #00f; /* dunkelblau */ --pw-q7: #6cfb4b; /* grün */ --pw-q8: #f00; /* rot — zugleich Sperr-Zeilen + Set-Zugehörigkeit */ --pw-q9: #80ffff; /* cyan */ /* ── PW-Flavour-Töne (Beschreibungstexte) ─────────────────────────────── Die `^RRGGBB`-Inline-Codes aus `configs/item_ext_desc.txt`, soweit sie in Ausrüstungs-/Material-Texten vorkommen (44 Töne; die restlichen Codes des Clients decken die 10 Palette-Werte oben ab). Geschlossene Liste — `scripts/pwdata-elements-import.php` meldet beim Import jeden Code, der hier fehlt (Client-Patch → hier ergänzen). */ --pw-t-ffcb4a: #ffcb4a; /* Flavour-Gold (häufigster Ton) */ --pw-t-00ffff: #0ff; --pw-t-7a7bf2: #7a7bf2; --pw-t-5998ff: #5998ff; --pw-t-ff4d3c: #ff4d3c; --pw-t-00ffae: #00ffae; --pw-t-f66535: #f66535; --pw-t-ff6666: #f66; --pw-t-ffd200: #ffd200; --pw-t-ff5c00: #ff5c00; --pw-t-aaaaaa: #aaa; --pw-t-dc3fd5: #dc3fd5; --pw-t-ff934a: #ff934a; --pw-t-ff6c00: #ff6c00; --pw-t-00ff00: #0f0; --pw-t-ffa10d: #ffa10d; --pw-t-e5ff0d: #e5ff0d; --pw-t-0eff19: #0eff19; --pw-t-0fffe0: #0fffe0; --pw-t-0f97ff: #0f97ff; --pw-t-da10ff: #da10ff; --pw-t-fff300: #fff300; --pw-t-ff00ee: #f0e; --pw-t-ff0f85: #ff0f85; --pw-t-ffc300: #ffc300; --pw-t-12ff00: #12ff00; --pw-t-da11ff: #da11ff; --pw-t-01ffff: #01ffff; --pw-t-808080: #808080; --pw-t-ffcb5a: #ffcb5a; --pw-t-ffc556: #ffc556; --pw-t-ffccff: #fcf; --pw-t-32cd32: #32cd32; --pw-t-a52a2a: #a52a2a; --pw-t-ffcb6a: #ffcb6a; --pw-t-ffcb7a: #ffcb7a; /* Nachtrag 2026-07-16 (Zwei-Welten-Import): der Wächter meldete diese 8 Codes als ungefärbt. Sie stammen aus denselben Client-Texten wie die Töne darüber — geprüft, dass keiner mit den 10 Palette-Werten oben zusammenfällt (sonst gehörten sie dorthin, nicht hierher). */ --pw-t-96f5ff: #96f5ff; --pw-t-02ffff: #02ffff; --pw-t-ffff00: #ff0; --pw-t-30ffff: #30ffff; --pw-t-ffcc00: #fc0; --pw-t-00cc66: #0c6; --pw-t-ff00ff: #f0f; --pw-t-00ff01: #00ff01; /* ── Progression-Roadmap-Phasen (kühl → warm: Einstieg … Ultra-Endgame) ── Einzige Quelle für Phasen-Bubble/Border/Akzent in der Roadmap-Timeline. */ --phase-1: #4dd9c0; --phase-2: #5aa6e0; --phase-3: #9b7df8; --phase-4: #d07ad8; --phase-5: #e8a23c; --phase-6: #f8714f; /* ── Fonts ──────────────────────────────────────────────────────────── */ --font-head: 'Cinzel', georgia, serif; --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: ui-monospace, 'SFMono-Regular', 'Menlo', 'Consolas', monospace; /* ── Größenskala (2026-07-13 vorbild-konform, 16-px-Sockel) ───────────── Vorher lief die reale UI auf ~13 px (--fs-sm) und der Body auf ~14,5 px — beide UNTER der 16-px-Norm aller Doku-Vorbilder (Docusaurus/Primer/Notion/GitBook). Neu: sauberer 12/14/16/18- Sockel (wie Primer/Tailwind), Ratio ~1,25 nach oben. **Body-Stufen fix in rem** — Fließtext skaliert NICHT mit dem Viewport (Vorbild: nur Display ist fluid; das alte +5-%-clamp am Body war wirkungslose Deko). Nur --fs-xl (Hero/H1) bleibt fluid per clamp. Task: typografie-vorbild-konform.md */ --fs-xs: 0.75rem; /* 12px — Meta/Labels/Badges */ --fs-sm: 0.875rem; /* 14px — Sekundär, dichte Tabellen/Tools */ --fs-base: 1rem; /* 16px — Body-Anker */ --fs-md: 1.125rem; /* 18px — Lead / kleine Headings */ --fs-lg: 1.375rem; /* 22px — h3/h2-Bereich */ --fs-xl: clamp(1.75rem, 1.2rem + 2.4vw, 2.5rem); /* 28–40px — H1/Hero (hier IST Fluid sinnvoll) */ /* ── Spacing-Skala ──────────────────────────────────────────────────── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-14: 56px; /* ── Control-Höhe: EINE feste Höhe für alle Form-Controls (Input/Select/Button), damit sie cross-browser + cross-Control-Typ pixelgleich sind. Vorbild: Carbon (fixed field height) / Primer (explizite Select-Höhe). Bewusst NICHT aus padding+ line-height abgeleitet — das fällt je Engine (FF≠Chromium) und je Control-Typ (natives Select ignoriert line-height) unterschiedlich aus. */ --control-h-sm: 28px; --control-h: 36px; --control-h-lg: 44px; /* ── Radien ─────────────────────────────────────────────────────────── */ --radius-sm: 4px; --radius: 8px; --radius-lg: 12px; --radius-pill: 20px; /* ── Layout-Maße ────────────────────────────────────────────────────── */ --header-h: 56px; --sidebar-w: 240px; --content-max: 1400px; /* Content-Breite (User-Test 2026-07-18): global auf 1400 verbreitert, damit die ganze Seite zur breiteren Simulator-Optik passt. Hub bleibt bei max. 3 Karten (cols[data-cols=3] ist fest gedeckelt) — die werden nur breiter. Historie: 2026-06-29 von 1600 → 1200 zurück (1600 war zu breit). ALLE Blöcke — auch reiner Fließtext — laufen bis hierher; kein separates Lesemaß mehr (User 2026-07-22: der --measure-Cap nur auf Fließtext war inkonsistent zu den vollbreiten Callouts). */ /* ── Transitions ────────────────────────────────────────────────────── */ --t-fast: 0.15s ease; /* ── Schatten (Elevation) ───────────────────────────────────────────── */ --shadow-pop: 0 8px 24px rgb(0 0 0 / 55%); /* schwebende Flächen (§12 Tooltip/Menü/Popover). EIN konsistenter Wert je Typ (Material 3: „Schatten nur wo nötig, konsistent"). Ersetzt 4 IST-Magic-Schatten. */ /* ── Stapel-Ebenen (z-index) ────────────────────────────────────────── */ /* Aufsteigende Ordnung: Dialog < Popover/Menü < Tooltip. Ersetzt das IST-Chaos (70/150/200/1001/9999). Natives +showModal() nutzt den Browser-Top-Layer und braucht KEIN z-index — die Token decken den Übergang mit div-basierten Overlays (Mockup/Bereitstellung). */ --z-modal: 1100; /* Dialog-Backdrop über dem Fluss (§4 evpw-modal). */ --z-popover: 1200; /* Menüs, Popover, Dropdowns — über Dialogen (Menü/Auswahl auch IN einem Dialog). */ --z-tooltip: 1300; /* Tooltip über allem, auch über Popover (§12 evpw-tooltip). */ }