/* ============================================================================ * TOWNCRYER · DESIGN TOKENS * ---------------------------------------------------------------------------- * Single Source of Truth fuer alle Design-Variablen. * * LADE-REIHENFOLGE: * 1. tokens.css ← diese Datei (theme-unabhaengige Basis) * 2. themes/_default.css ← Mordheim-Akzente (oder via .theme-mordheim) * 3. themes/_pathfinder.css ← per .theme-pathfinder * 4. themes/_bloodbowl.css ← per .theme-bloodbowl * 5. themes/_aos.css ← per .theme-aos * 6. themes/_community.css ← per .theme-community * 7. components/*.css ← Komponenten-Bibliothek (Phase 2) * 8. pages/*.css ← Page-Specific (Phase 3+) * * NAMING: * --tc-{kategorie}-{name}-{variant} * Praefix "tc-" steht fuer TownCryer-Komponente, unterscheidbar von * Legacy-Variablen wie --color-gold (die als Aliase erhalten bleiben). * * BACKWARD-COMPAT: * Am Ende dieser Datei werden alte Variable-Namen (--color-gold, * --bg-card, --spacing-*, --radius-*, --shadow-*, --modal-*) auf * die neuen tc-* Tokens gemappt. Dadurch funktioniert ALLES bestehende * weiter, OHNE dass eine Datei angefasst werden muss. * * Version: 1.0 (28. Mai 2026, Phase 1 der Design-System-Initiative) * ============================================================================ */ /* ============================================================================ * A. SPACING — 4px-Basis-Skala * ============================================================================ */ :root { --tc-space-0: 0; --tc-space-1: 4px; /* xs — Innen-Pills, Mini-Gaps */ --tc-space-2: 8px; /* sm — Tight-Padding */ --tc-space-3: 12px; /* md — Standard-Padding */ --tc-space-4: 16px; /* lg — Card-Padding */ --tc-space-5: 24px; /* xl — Section-Padding */ --tc-space-6: 32px; /* 2xl — Page-Section-Gap */ --tc-space-7: 48px; /* 3xl — Hero-Padding */ --tc-space-8: 64px; /* 4xl — Top-Level-Spacing */ } /* ============================================================================ * B. RADII — Borderradius-Skala * ============================================================================ */ :root { --tc-radius-xs: 2px; /* Mini-Tags */ --tc-radius-sm: 4px; /* Pills, kleine Badges */ --tc-radius-md: 8px; /* Inputs, kleine Cards, Buttons */ --tc-radius-lg: 12px; /* Cards, Standard-Modals */ --tc-radius-xl: 16px; /* Hero-Sections, grosse Cards */ --tc-radius-2xl: 24px; /* Premium-Cards */ --tc-radius-full: 9999px;/* Avatare, runde Pills */ /* Page-Breiten (tc-page / tc-container) — Vereinheitlichung 1100/1400/1600 */ --tc-page-max: 1400px; /* Standard-Seitenbreite (war gemischt) */ --tc-page-narrow: 900px; /* schmale Lese-/Formular-Seiten */ --tc-page-wide: 1600px; /* breite Tabellen/Listen */ } /* ============================================================================ * C. TYPOGRAPHY — Font-Families, Sizes, Weights, Leading * ============================================================================ */ :root { /* Font Families */ --tc-font-display: 'Cinzel', 'Times New Roman', serif; --tc-font-body: 'Lato', -apple-system, BlinkMacSystemFont, sans-serif; --tc-font-mono: 'JetBrains Mono', 'Courier New', monospace; /* Font Sizes (rem-basiert, ~16px Base) */ --tc-text-2xs: 0.625rem; /* 10px — Mini-Labels, Tags */ --tc-text-xs: 0.72rem; /* ~11.5px — Captions, Meta */ --tc-text-sm: 0.82rem; /* ~13px — Sekundaer-Text */ --tc-text-base: 0.95rem; /* ~15px — Body */ --tc-text-lg: 1.1rem; /* ~17.5px — Sub-Headlines */ --tc-text-xl: 1.3rem; /* ~21px — Card-Headlines */ --tc-text-2xl: 1.6rem; /* ~25.5px — Page-Headlines */ --tc-text-3xl: 2.2rem; /* ~35px — Hero-Titles */ --tc-text-4xl: 3rem; /* 48px — Display */ /* Font Weights */ --tc-weight-normal: 400; --tc-weight-medium: 500; --tc-weight-semibold: 600; --tc-weight-bold: 700; /* Line Heights */ --tc-leading-tight: 1.25; --tc-leading-snug: 1.4; --tc-leading-normal: 1.5; --tc-leading-relaxed: 1.75; /* Letter Spacing — fuer Display + Cinzel-Headlines */ --tc-tracking-tight: -0.01em; --tc-tracking-normal: 0; --tc-tracking-wide: 0.03em; --tc-tracking-widest: 0.1em; } /* ============================================================================ * D. SHADOWS + GLOWS — Tiefe + Akzent-Effekte * ============================================================================ */ :root { --tc-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3); --tc-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); --tc-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5); --tc-shadow-xl: 0 12px 48px rgba(0, 0, 0, 0.6); --tc-shadow-modal: 0 24px 60px rgba(0, 0, 0, 0.7); /* Glow-Tokens — werden pro Theme mit --tc-accent-glow gefuettert */ --tc-glow-intensity: 0.3; /* Theme kann das override (z.B. PF 0.4) */ } /* ============================================================================ * E. MOTION — Transitions + Easings * ============================================================================ */ :root { --tc-motion-instant: 0ms; --tc-motion-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1); --tc-motion-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1); --tc-motion-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1); --tc-motion-bounce: 300ms cubic-bezier(0.34, 1.56, 0.64, 1); --tc-motion-elegant: 250ms cubic-bezier(0.34, 1.56, 0.64, 1); /* PF Default */ /* Easings einzeln verfuegbar — falls Komponenten eigene Durations brauchen */ --tc-ease-default: cubic-bezier(0.4, 0, 0.2, 1); --tc-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --tc-ease-in: cubic-bezier(0.4, 0, 1, 1); --tc-ease-out: cubic-bezier(0, 0, 0.2, 1); } /* Respektiere prefers-reduced-motion */ @media (prefers-reduced-motion: reduce) { :root { --tc-motion-fast: 0ms; --tc-motion-normal: 0ms; --tc-motion-slow: 0ms; --tc-motion-bounce: 0ms; --tc-motion-elegant: 0ms; } } /* ============================================================================ * F. Z-INDEX-SKALA * ============================================================================ */ :root { --tc-z-base: 1; --tc-z-dropdown: 1000; --tc-z-sticky: 1100; --tc-z-fixed: 1200; --tc-z-modal-bg: 1300; --tc-z-modal: 1400; --tc-z-popover: 1500; --tc-z-tooltip: 1600; --tc-z-toast: 1700; --tc-z-debug: 9999; } /* ============================================================================ * G. TOUCH-TARGETS * ============================================================================ */ :root { --tc-touch-min: 36px; /* Web-Standard */ --tc-touch-rec: 44px; /* Apple HIG Empfehlung */ } /* ============================================================================ * H. BASE COLORS — Theme-unabhaengig * Hintergrund-Stack, Text-Stack, Border-Stack * ============================================================================ */ :root { /* Hintergrund-Stack — von dunkel zu hell */ --tc-bg-base: #1a1a1a; /* Page-Background */ --tc-bg-surface-1: #242424; /* Card-Background */ --tc-bg-surface-2: #2d2d2d; /* Modal-Background */ --tc-bg-surface-3: #3a3a3a; /* Hover/Active */ --tc-bg-input: #1f1f1f; /* Input-Felder */ --tc-bg-overlay: rgba(0, 0, 0, 0.85); /* Text-Stack */ --tc-text-strong: #e0e0e0; /* Headlines, wichtige Werte */ --tc-text-default: #b0b0b0; /* Body */ --tc-text-muted: #888888; /* Captions, Meta */ --tc-text-disabled: #555555; /* Disabled */ --tc-text-on-accent: #1a1a1a; /* Text auf Accent-Background (Buttons) */ /* Border-Stack */ --tc-border-subtle: rgba(255, 255, 255, 0.06); --tc-border-default: rgba(255, 255, 255, 0.12); --tc-border-strong: rgba(255, 255, 255, 0.25); /* Border-Color als Hex-Fallback (fuer Themes die solid Borders wollen) */ --tc-border-color: #444444; } /* ============================================================================ * I. SEMANTIC COLORS — Status-Farben * ============================================================================ */ :root { --tc-success: #4ade80; --tc-warning: #fbbf24; --tc-danger: #f87171; --tc-info: #60a5fa; --tc-attention: #f97316; /* Alpha-Variants — fuer Backgrounds + Borders */ --tc-success-bg: rgba(74, 222, 128, 0.08); --tc-success-border: rgba(74, 222, 128, 0.30); --tc-warning-bg: rgba(251, 191, 36, 0.08); --tc-warning-border: rgba(251, 191, 36, 0.30); --tc-danger-bg: rgba(248, 113, 113, 0.10); --tc-danger-border: rgba(248, 113, 113, 0.40); --tc-info-bg: rgba(96, 165, 250, 0.08); --tc-info-border: rgba(96, 165, 250, 0.30); --tc-attention-bg: rgba(249, 115, 22, 0.08); --tc-attention-border:rgba(249, 115, 22, 0.30); } /* ============================================================================ * J. ACCENT COLORS — Default (= Mordheim) * Wird von Theme-Files (siehe themes/_*.css) ueberschrieben. * ============================================================================ */ :root { --tc-accent: #c9a959; /* Gold (Mordheim-Default) */ --tc-accent-light: #d4bc7a; --tc-accent-dark: #9a7b3a; --tc-accent-glow: rgba(201, 169, 89, 0.30); --tc-accent-rgb: 201, 169, 89; /* RGB-Tripel fuer rgba(var(--tc-accent-rgb), a) */ --tc-secondary: #8b0000; /* Blut (Mordheim-Default) */ --tc-secondary-light:#a52a2a; --tc-secondary-dark: #5c0000; --tc-secondary-glow: rgba(139, 0, 0, 0.30); --tc-secondary-rgb: 139, 0, 0; /* RGB-Tripel fuer rgba(var(--tc-secondary-rgb), a) */ /* AUSZEICHNUNG (Tertiary) — der „TownCryer-Glanz“: Headlines, aktive/gewaehlte Zustaende, echte Akzentmomente. Sparsam einsetzen (M3-Tertiary-Logik). Default = helles Gold; jedes Theme ueberschreibt es passend (siehe Matrix). */ --tc-highlight: #e4c987; /* helles Gold (Default-Glanz) */ --tc-highlight-rgb: 228, 201, 135; --tc-highlight-glow: rgba(228, 201, 135, 0.30); /* ========================================================================== * SYSTEM-PALETTE (--tc-sys-*) — VERBINDLICHE GRUNDLAGE (07.06.2026, Tim) * -------------------------------------------------------------------------- * System-NEUTRALE Farben: gelten unabhaengig vom aktiven .theme-*. Gedacht * fuer das gemischte Dashboard, wo Karten/Badges/Tiles MEHRERER Systeme * nebeneinander stehen (eine BB-Karte bleibt blau, auch ohne theme-bloodbowl). * Pro System: -primary / -secondary / -highlight + -rgb (Primaer, fuer rgba()). * Dies ist die EINE Quelle — Komponenten ziehen hier, kein verstreutes Hex. * ======================================================================== */ /* Mordheim — Muted City: Gold + Blutrot */ --tc-sys-mordheim: #c9a959; --tc-sys-mordheim-rgb: 201, 169, 89; --tc-sys-mordheim-secondary: #8b0000; --tc-sys-mordheim-highlight: #e4c987; /* Pathfinder: Bronze + Drachenrot */ --tc-sys-pathfinder: #c87a3f; --tc-sys-pathfinder-rgb: 200, 122, 63; --tc-sys-pathfinder-secondary: #7c3626; --tc-sys-pathfinder-highlight: #f0c987; /* Blood Bowl — Rot/Blau/Weiss: Stahlblau primaer, Rot sekundaer */ --tc-sys-bloodbowl: #2f6fb0; --tc-sys-bloodbowl-rgb: 47, 111, 176; --tc-sys-bloodbowl-secondary: #c0392b; --tc-sys-bloodbowl-highlight: #d4a93f; /* Age of Sigmar: Rot primaer, Petrol sekundaer, Gold Auszeichnung */ --tc-sys-aos: #9e2b25; --tc-sys-aos-rgb: 158, 43, 37; --tc-sys-aos-secondary: #2e6b6b; --tc-sys-aos-highlight: #d4a93f; /* Community / Social: Smaragd + Gold */ --tc-sys-community: #34d399; --tc-sys-community-rgb: 52, 211, 153; --tc-sys-community-secondary: #c9a959; --tc-sys-community-highlight: #e4c987; /* Social = Alias auf Community (gleiche Identitaet) */ --tc-sys-social: var(--tc-sys-community); --tc-sys-social-secondary: var(--tc-sys-community-secondary); --tc-sys-social-highlight: var(--tc-sys-community-highlight); /* Banner-Text — Farbe fuer Titel AUF einem akzentfarbigen Banner/Hero. NICHT --tc-accent verwenden (sonst Akzent-auf-Akzent, z.B. AoS rot/rot). Default Mordheim: Gold liegt auf dunklem/blutigem Banner gut lesbar. */ --tc-on-banner: #e8d4a0; /* helles Gold, Default */ } /* ============================================================================ * K. DECORATIVE LAYER — Theme-spezifische Stimmungs-Tokens * ---------------------------------------------------------------------------- * HIER lebt die Anti-Bland-Strategie (Option C aus dem Audit): * * Jedes Theme definiert eigene "Decorative-Tokens" fuer atmosphaerische * Surfaces wie z.B. den Champagner-Block im PF Item-Configurator. * Eine Komponente wie tc-card--ornate nutzt diese Tokens, OHNE selbst * theme-spezifisch zu sein. So sieht eine ornate-Card im Pathfinder-Theme * champagner-warm aus, im Mordheim-Theme sepia, im AoS-Theme mondsilber. * * Default-Werte hier (= Mordheim-Sepia-Vibe). Pro Theme override-bar. * ============================================================================ */ :root { /* Warm-Surface — fuer ornate Cards, Material-Bloecke */ --tc-deco-warm-bg: rgba(201, 169, 89, 0.04); /* Mordheim: Gold-Light */ --tc-deco-warm-border: rgba(201, 169, 89, 0.18); --tc-deco-warm-text: var(--tc-accent-light); /* Blood-Pill — fuer Trait/Rune-Pills, dramatische Akzente */ --tc-deco-blood-pill-bg: rgba(139, 0, 0, 0.18); --tc-deco-blood-pill-border: rgba(139, 0, 0, 0.40); --tc-deco-blood-pill-text: #e0c4a0; /* Ornament — fuer feine Dekor-Borders (z.B. um Hero-Sections) */ --tc-deco-ornament-border: rgba(201, 169, 89, 0.12); --tc-deco-ornament-glow: rgba(201, 169, 89, 0.06); /* Banner-Overlay — Gradient-Overlay fuer Background-Images */ --tc-deco-banner-overlay: linear-gradient( 180deg, rgba(26, 18, 8, 0.15) 0%, rgba(26, 18, 8, 0.55) 55%, rgba(26, 18, 8, 0.75) 100% ); } /* ============================================================================ * L. BACKWARD-COMPAT — Alte Variable-Namen als Aliase * ---------------------------------------------------------------------------- * Damit ALLE bestehenden CSS-Files (mordheim-unified.css, mordheim-theme.css, * pathfinder.css, dashboard.css, gamification-styles.css, ...) ohne * Aenderung weiter funktionieren, mappen wir hier die historischen * Variable-Namen auf die neuen tc-* Tokens. * * WICHTIG: Diese Aliase sind temporaer. Geplant fuer Phase 6 (Konsolidierung) * ist die schrittweise Entfernung, sobald alle CSS-Files migriert sind. * * Hinweis: mordheim-unified.css definiert dieselben Variablen NOCHMALS * mit Hex-Werten. Die zweite Definition gewinnt (later wins), d.h. solange * mordheim-unified.css geladen wird, gelten dort die Werte. Das ist OK — * die Werte sind identisch zu hier. Ziel ist, dass beide irgendwann auf * tc-* zeigen. * ============================================================================ */ :root { /* Akzent-Farben (Mordheim-Default) */ --color-gold: var(--tc-accent); --color-gold-light: var(--tc-accent-light); --color-gold-dark: var(--tc-accent-dark); --color-blood: var(--tc-secondary); --color-blood-light: var(--tc-secondary-light); --color-blood-dark: var(--tc-secondary-dark); --gold: var(--tc-accent); --blood: var(--tc-secondary); /* Funktionale Farben */ --color-success: var(--tc-success); --color-success-light: var(--tc-success); --color-warning: var(--tc-warning); --color-warning-light: var(--tc-warning); --color-error: var(--tc-danger); --color-error-light: var(--tc-danger); --color-info: var(--tc-info); --color-info-light: var(--tc-info); /* Hintergruende */ --bg-body: var(--tc-bg-base); --bg-primary: var(--tc-bg-base); --bg-secondary: var(--tc-bg-surface-1); --bg-card: var(--tc-bg-surface-2); --bg-card-hover: var(--tc-bg-surface-3); --bg-card-header: var(--tc-bg-surface-2); --bg-input: var(--tc-bg-input); --bg-overlay: var(--tc-bg-overlay); --bg-dark: var(--tc-bg-base); /* Text */ --text-primary: var(--tc-text-strong); --text-secondary: var(--tc-text-default); --text-muted: var(--tc-text-muted); --text-dark: var(--tc-text-on-accent); --text: var(--tc-text-strong); /* Borders */ --border-color: var(--tc-border-color); --border-light: #555555; --border-dark: #333333; --border: var(--tc-border-color); --border-accent: var(--tc-secondary); /* Schatten */ --shadow-sm: var(--tc-shadow-sm); --shadow-md: var(--tc-shadow-md); --shadow-lg: var(--tc-shadow-lg); --shadow-xl: var(--tc-shadow-xl); --shadow-glow-gold: 0 0 15px var(--tc-accent-glow); --shadow-glow-blood: 0 0 15px var(--tc-secondary-glow); --shadow-glow-success: 0 0 15px rgba(74, 222, 128, 0.4); /* Typografie */ --font-display: var(--tc-font-display); --font-body: var(--tc-font-body); --font-gothic: var(--tc-font-display); /* Radii */ --radius-xs: var(--tc-radius-xs); --radius-sm: var(--tc-radius-sm); --radius-md: var(--tc-radius-md); --radius-lg: var(--tc-radius-lg); --radius-xl: var(--tc-radius-xl); --radius-full: var(--tc-radius-full); --radius: var(--tc-radius-md); /* Spacing */ --spacing-xs: var(--tc-space-1); --spacing-sm: var(--tc-space-2); --spacing-md: var(--tc-space-4); /* Hinweis: --spacing-md war historisch 16px = tc-space-4 */ --spacing-lg: var(--tc-space-5); /* Historisch 24-30px */ --spacing-xl: var(--tc-space-6); /* Historisch 32-50px */ --spacing-2xl: var(--tc-space-7); /* Transitions */ --transition-fast: var(--tc-motion-fast); --transition-normal: var(--tc-motion-normal); --transition-slow: var(--tc-motion-slow); --transition-bounce: var(--tc-motion-bounce); /* Modal Sizes — bleiben gleich, sind in mordheim-unified.css definiert. Hier nur als Fallback falls jemand tokens.css ohne unified.css laedt. */ --modal-xs: 320px; --modal-sm: 420px; --modal-md: 600px; --modal-lg: 800px; --modal-xl: 1000px; --modal-2xl: 1200px; --modal-full: 95vw; /* Z-Index — Aliase fuer historische Namen */ --z-dropdown: var(--tc-z-dropdown); --z-sticky: var(--tc-z-sticky); --z-fixed: var(--tc-z-fixed); --z-modal-backdrop: var(--tc-z-modal-bg); --z-modal: var(--tc-z-modal); --z-popover: var(--tc-z-popover); --z-tooltip: var(--tc-z-tooltip); --z-toast: var(--tc-z-toast); /* Pathfinder-Aliase — bleiben funktionsfaehig, koennen spaeter migriert werden */ --pf-color-accent: var(--tc-accent); --pf-color-primary: #7c3626; }