/* ============================================================ Pangea Design Tokens - Single Source of Truth für Farbwerte ============================================================ Drei-Ebenen-Modell (Martin Fowler / Primer / DTCG): EBENE 1 Primitive (--pg-c-*) Roh-Farbwerte, benannt nach dem was sie SIND (Stone, Slate, Charcoal ...). Die einzige Stelle mit rohem Hex. Hier wird Farbe DEFINIERT. EBENE 2 Semantik (--pg-*) benannt nach VERWENDUNG (bg, hero, accent, text). Verweisen per var() auf Ebene 1. Was Komponenten lesen. EBENE 3 Komponente nur bei echtem Bedarf, lokal in der jeweiligen Komponenten-CSS (z.B. --pg-table-header-bg). Hier bewusst NICHT vorgehalten (kein Vorrat ohne Nutzen). Beide Dashboard-Token-Systeme aliasen auf die Semantik-Ebene: - dashboard-system.css (--ds-*) Hub + DashboardModuleLayout - customer-dashboard.css (--hf-*) Kunden-Modulseiten Cross-Context-Komponenten nutzen --pg-* direkt. Werte = on-brand CI "A3 Muted Navy". Änderung am Primitive wirkt überall. Hinweis: Diese Datei lebt in public/styles und ist bewusst vom Design-Token-Gate (scripts/check-design-tokens.mjs) ausgenommen - hier GEHÖRT roher Hex hin. ============================================================ */ :root { /* ========================================================== EBENE 1 - PRIMITIVE (Roh-Palette, nur hier steht Hex) ========================================================== */ /* Marken-Kernpalette (hell -> dunkel) */ --pg-c-stone: #F4F5F4; /* Stone - hellster Flächenton */ --pg-c-white: #FFFFFF; --pg-c-stone-soft: #E8E8E6; /* Text auf dunklen Flächen (Hero/CTA/Footer) - der Guide-Wert --text-light. Bis 13.08.2026 vorgeschrieben, aber nicht in der Palette: das eigene Quality-Gate meldete regelkonforme Arbeit (PA-172) */ --pg-c-cloud: #E0E7EE; /* Cloud - heller Slate-Tint */ --pg-c-muted-blue: #6B8EAD; /* Muted Blue - Soft-Accent / Daten-Viz */ --pg-c-slate: #253749; /* Slate - Akzent / sekundäre Dunkelfläche */ --pg-c-slate-deep: #1B2836; /* dunklere Slate-Fläche */ --pg-c-charcoal: #0D1117; /* Charcoal - Hero / CTA / Footer */ --pg-c-ink: #1A1A1A; /* Text-Schwarz */ /* Neutrale Graustufen (Text-Hierarchie) */ --pg-c-grey-600: #555555; --pg-c-grey-500: #888888; --pg-c-grey-400: #B0B0B0; /* Funktionale Töne (Status / Risk / Kategorie) */ --pg-c-green: #4D7C5A; /* Erfolg / sehr niedriges Risiko */ --pg-c-green-deep: #2F5238; /* dunkler Trend-Pfeil */ --pg-c-olive: #7A8E3A; /* niedriges Risiko */ --pg-c-amber: #B07505; /* Warnung / mittleres Risiko */ --pg-c-rust: #BB4D00; /* hohes Risiko */ --pg-c-red: #9B2226; /* Gefahr / sehr hohes Risiko */ --pg-c-teal-deep: #1A3030; /* Info-Vertiefung */ --pg-c-violet: #5C4A73; /* Kategorie Währung */ --pg-c-coral: #EC6A66; /* steigender Preis (auf Slate) */ --pg-c-mint: #5FBF84; /* fallender Preis (auf Slate) */ /* Sequenzielle Daten-Viz-Rampe (Slate -> Muted-Blue, dunkel -> hell). Abgeleitet aus china-shock-storyboard.html (Step-Chart c1-c4). */ --pg-c-viz-slate-mid: #41566B; --pg-c-viz-blue-mid: #557291; --pg-c-viz-blue-light:#9DB6CC; /* Badge-/Tint-Flächen (eigenständige helle Töne) */ --pg-c-amber-bg: #FBEFD8; --pg-c-amber-text: #8A5A06; --pg-c-red-bg: #FBEDED; --pg-c-red-border: #F0D5D5; /* ========================================================== EBENE 2 - SEMANTIK (Verwendung -> verweist auf Ebene 1) ========================================================== */ /* Flächen */ --pg-bg: var(--pg-c-stone); /* Page-Hintergrund */ --pg-surface: var(--pg-c-white); /* Cards / Panels */ --pg-hero: var(--pg-c-charcoal); /* Hero / CTA / Footer */ --pg-hero-2: var(--pg-c-slate); /* sekundäre Dunkelfläche, Metrics-Bar */ --pg-stone: var(--pg-c-stone); /* Alias (= --pg-bg), historisch genutzt */ --pg-slate-tint: var(--pg-c-cloud); /* Cloud-Tint */ /* Text (neutral, on-brand) */ --pg-text: var(--pg-c-ink); --pg-text-secondary: var(--pg-c-grey-600); --pg-text-muted: var(--pg-c-grey-500); --pg-text-faint: var(--pg-c-grey-400); /* Akzent - Slate. Muted Blue ist Daten-Viz / Soft-Accent. */ --pg-accent: var(--pg-c-slate); --pg-accent-tint: rgba(37,55,73,0.07); /* Slate @ 7% - bewusst als Tint-rgba */ --pg-muted-blue: var(--pg-c-muted-blue); /* Borders (neutrale Transparenz, kein Primitive) */ --pg-border: rgba(0,0,0,0.09); --pg-border-strong: rgba(0,0,0,0.16); /* Status / semantisch */ --pg-success: var(--pg-c-green); --pg-success-deep: var(--pg-c-green-deep); /* Highlights */ --pg-warn: var(--pg-c-amber); --pg-warn-bg: var(--pg-c-amber-bg); /* Badge-Hintergrund Warn */ --pg-warn-text: var(--pg-c-amber-text); /* Badge-Text Warn */ --pg-danger: var(--pg-c-red); --pg-danger-bg: var(--pg-c-red-bg); --pg-danger-border:var(--pg-c-red-border); --pg-info: var(--pg-c-slate); --pg-info-deep: var(--pg-c-teal-deep); --pg-cat-currency: var(--pg-c-violet); /* Slate-Karten (auf dunklem Slate-BG) */ --pg-on-dark: var(--pg-c-white); /* Text/Werte auf Slate */ --pg-slate-deep: var(--pg-c-slate-deep); --pg-commodity-up: var(--pg-c-coral); /* steigender Preis */ --pg-commodity-down: var(--pg-c-mint); /* fallender Preis */ /* Risk-Skala (identisch in beiden Altsystemen) */ --pg-risk-vlow: var(--pg-c-green); --pg-risk-low: var(--pg-c-olive); --pg-risk-med: var(--pg-c-amber); --pg-risk-high: var(--pg-c-rust); --pg-risk-vhigh: var(--pg-c-red); /* Daten-Viz-Rampe (sequenziell, dunkel -> hell). Eine SSOT-Rampe für Step-/Bar-Charts in Reports, Social-Decks und Carousels. */ --pg-viz-1: var(--pg-c-slate); /* dunkelste Stufe */ --pg-viz-2: var(--pg-c-viz-slate-mid); --pg-viz-3: var(--pg-c-viz-blue-mid); --pg-viz-4: var(--pg-c-muted-blue); --pg-viz-5: var(--pg-c-viz-blue-light); /* hellste Stufe */ /* ========================================================== Nicht-Farbe (Radius / Schrift / Abstand) - bleibt flach ========================================================== */ --pg-radius: 3px; --pg-radius-sm: 2px; --pg-font: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --pg-font-serif: 'Instrument Serif', Georgia, serif; /* Spacing-Skala, 8px-Basis (PA-174). Vor ihr gab es keine Abstands-Tokens, und die Streuung zeigte es: 851 verschiedene padding-Werte in src/ bei 0 Prozent var()-Nutzung. Neue Dateien muessen die Treppe nehmen (scripts/check-spacing.mjs), 1-3px Feinjustagen bleiben frei. */ --pg-space-0: 4px; /* halbe Stufe - dichte UI, Chip-Innenraum */ --pg-space-1: 8px; /* Basis - kleinste echte Luecke */ --pg-space-2: 12px; /* dichter Kachel-Innenabstand */ --pg-space-3: 16px; /* Standard-Innenabstand */ --pg-space-4: 24px; /* Card-Padding, Grid-Gap */ --pg-space-5: 32px; /* grosszuegiges Card-Padding, Blockabstand */ --pg-space-6: 48px; /* Abstand zwischen Inhaltsgruppen */ --pg-space-7: 64px; /* Section-Padding mobil */ --pg-space-8: 96px; /* Section-Padding Desktop (Guide: 96-100px) */ /* Marketing-Typo-Treppe, acht Stufen (PA-174). Werte-Quelle ist die Schriftgroessen-Tabelle in pangea-web-design.md Sektion 4 - hier als Token, damit neue Marketing-Seiten ohne rohe font-size-Literale bauen koennen (scripts/check-font-scale.mjs prueft seitdem alle src/pages). Module nutzen weiterhin ihre eigene Treppe --ds-fs-* (customer-dashboard). */ --pg-fs-meta: 11px; /* Nav, Labels, Meta/Datum (600, uppercase, letter-spacing) */ --pg-fs-button: 13px; /* Buttons (600) */ --pg-fs-body-sm: 15px; /* Body Small */ --pg-fs-body: 17px; /* Fliesstext (400, line-height 1.7) */ --pg-fs-h3: 20px; /* Card-Titel (700) */ --pg-fs-statement: 24px; /* Serif-Statement/Quote (400 italic) */ --pg-fs-h2: clamp(28px, 4vw, 44px); /* Section-Titel (700) */ --pg-fs-hero: clamp(40px, 6vw, 72px); /* Hero-Titel (800) */ }