/* FIP Design Tokens * * Visual-Stil-Quelle: 3_UX Brand/FIP-Landing-Page-v8.html (07.05.2026) * ─ alle :root-Variablen, Akten-DNA, Editorial-Typography * Layout-Quelle: Engine/docs/cockpit-vision-2026-04-24/ * ─ Sidebar-Struktur, KPI-Pattern, Filter-Pill-Pattern, Stepper-Pattern * * Extrahiert in Buendel-2-A am 2026-05-07. * * Naming-Hygiene: keine Pilot-/ERP-Eigennamen. * * KEINE Hex-Codes ausserhalb dieser Datei. Andere CSS-Files referenzieren * ausschliesslich var(--token). Audit-Smoke 150 + 151 (029-Foundation A4) * detektieren Verstoesse als WARN. */ :root { /* === Brand Colors (Landing v8) ============================================ */ --navy: #1A2744; --navy-soft: #2A3552; --navy-mid: #243356; /* Bestand aus 029i, behalten als Hover-Tint */ /* Phase 2-Z-A (16.05.): Mockup-Tokens fuer Button-Hover + Topbar-Edge */ --navy-light: #2B3960; /* btn-primary:hover Background */ --navy-darker: #131D33; /* Topbar-Edge / dark Border */ /* Gold-Akzentuierung --gold: Standard-Akzent (dezent), z.B. Active-Border-Left --gold-bright: nur fuer seltene Highlights (Hero-CTA, Stat-Italics) */ --gold: #B8884A; --gold-bright: #D4A843; --gold-border: rgba(184, 136, 74, 0.30); --gold-faint: rgba(184, 136, 74, 0.12); /* Focus-Ring, Active-Background-Tint */ /* === Surface / Paper-Tones (Landing v8 Akten-DNA) ========================= */ --warm-white: #FAF9F6; /* Main-Content-Background */ --off-white: #F5F3EE; /* Sidebar, Sections, Filter-Bar-Background */ --cream: #F0EAD9; /* waermer fuer Akten-DNA, Active-Item-Tint */ --card: #FFFFFF; /* echtes Weiss fuer Cards (Container-Layer) */ /* Phase 2-Z-A (16.05.): Mockup-Alias --paper / --paper-bright fuer * Mockup-Pattern-Konsistenz. --paper == --warm-white, --paper-bright == --card. */ --paper: var(--warm-white); --paper-bright: var(--card); /* === Ink / Text-Tones ===================================================== */ --ink: #1F1A14; /* Primary Text auf Akten-DNA */ --ink-soft: #5A4F3D; /* Secondary Text auf Akten-DNA */ --slate: #5C6478; /* General-Purpose Secondary Text */ --light-slate: #94A3B8; /* Counts, Badges, Disabled */ --slate-light: var(--light-slate); /* Phase 2-Z-A Mockup-Alias */ /* === Borders + Lines ====================================================== */ --border: #E2DDD2; --border-strong: #C9C0AE; /* === Akten-DNA (Beweisstueck-Komponente Landing v8) ======================= */ --paper: #EFE5D0; --paper-shadow: rgba(80, 60, 30, 0.08); --paper-tab: #D6C9A8; --paper-line: rgba(80, 60, 30, 0.22); /* dashed-Borders innerhalb Akte */ --paper-edge: rgba(80, 60, 30, 0.14); /* solid-Borders innerhalb Akte */ --stamp-red: #A23A2C; /* === Akzent-Farben (sparsam, fuer Status / Severity) ===================== */ --rust: #B06842; /* Warning-Akzent */ --sage: #7A9B89; /* Confirmed / OK */ /* Phase 2-Z-B (16.05.): Sand-Tones fuer Status-Chip-Backgrounds */ --sand: #C9B488; --sand-light: #E5D8B8; --sage-light: #D5E0D8; /* Phase 2-Z-C (16.05. spaet): Steel-light + Gold-light-bg fuer Akte-Patterns */ --steel-light: #E2ECF4; --gold-light-bg: rgba(184, 136, 74, 0.10); /* timeline-icon, ai-card-layer */ /* Chip-Text-Akzente (dark variants fuer Kontrast auf hellem Chip-Background) */ --chip-text-sand: #735733; /* dark sand-brown */ --chip-text-steel: #2E4F71; /* dark steel-blue */ --chip-text-sage: #4D6B5A; /* dark sage-green */ /* === Lever-Class Color-Map (5 Klassen, Sven Q5) =========================== */ --lever-recovery: var(--rust); --lever-wc: #4A6FA5; /* Working Capital — kuehleres Blau */ --lever-einsparung: var(--gold); --lever-compliance: var(--navy); --lever-strategic: var(--sage); /* === Phase 2-F Block G.4: Drei-Dimensionen-Category-Color-Map (3 Klassen, * Sven-Direktive 13.05., Memory project_three_dimensions_recovery_ * preventive_compliance.md). NEU Top-Level-Achse; lever-* bleibt als * Sub-Filter-Coloring aktiv (Werkbench-Pills) — die beiden Mappings sind * orthogonal und absichtlich unterschiedlich: * category-recovery = Navy (FIP-primary, dominant value) * category-preventive = Gold-bright (saving/optimization accent) * category-compliance = Sand-dark (Brand-konsistent, NICHT Rot) * * Phase 2-F-Followup-3 Block C (Sven-Decision 15.05.): * Compliance-Pill war Rust (= var(--rust) = #B06842) — wirkte alarmiert * und prominenter als Critical/High-Severity-Stamps. NEU: Sand-dark * (Brand-konsistent mit cream/paper/paper-tab). Rot bleibt reserviert * fuer Severity-Stamps (Critical/High). Risk-Pills innerhalb Compliance- * Card-Foot bleiben kritisch-rot (siehe .fip-akte-foot-risk--critical). * * Pill-Text-Akzente (dark variants) als eigene Tokens fuer Kontrast. */ --category-recovery: var(--navy); --category-preventive: var(--gold-bright); --category-compliance: #C5B583; /* Sand-dark, Brand-Reihe paper/paper-tab */ --category-recovery-text: var(--navy); --category-preventive-text: #8B6D1A; /* dark gold fuer Pill-Text-Kontrast */ --category-compliance-text: #5C4D2E; /* dark sand-brown fuer Pill-Text-Kontrast */ /* === Severity Color-Map ================================================== */ --severity-critical: var(--stamp-red); --severity-high: var(--rust); --severity-medium: var(--gold); --severity-low: var(--slate); --severity-info: var(--light-slate); /* === Typography (Font Stacks) ============================================ */ --font-serif: 'Libre Baskerville', Georgia, 'Times New Roman', serif; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* === Spacing-Skala (Phase 2-Z-A Mockup-Aligned 16.05.) ================== * Aenderung 16.05.: --space-5/6/8 auf Mockup-Werte angeglichen (20/24/32px * statt 22/28/48px). Alte Pages bekommen 2-4px visual-drift — akzeptabel * fuer unified Token-System. --space-10/12/16 NEU. */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; /* Mockup-Aligned (war 22px pre-2-Z-A) */ --space-6: 24px; /* Mockup-Aligned (war 28px pre-2-Z-A) */ --space-7: 32px; /* unchanged */ --space-8: 32px; /* Mockup-Aligned (war 48px pre-2-Z-A) */ --space-10: 40px; /* NEU 2-Z-A */ --space-12: 48px; /* NEU 2-Z-A (alter --space-8-Wert) */ --space-16: 64px; /* NEU 2-Z-A */ /* === Border-Radius-Skala ================================================= */ --radius-xs: 2px; /* NEU 2-Z-A: Mockup-Indikator (active-Strich) */ --radius-sm: 3px; /* Stamps, Inline-Markers */ --radius: 4px; /* Buttons, Standard-Boxes */ --radius-md: 6px; /* Cards (Landing v8) */ --radius-lg: 10px; /* Container-Cards (24.04.) */ --radius-xl: 14px; /* Major-Cards, Filter-Bar */ --radius-pill: 100px; /* Pills, Badges */ /* === Shadows (Phase 2-Z-A 16.05.: Mockup-Aligned subtler) =============== * Vorher: rgba(31,26,20,*) — warmer/dunkler Schatten. * Mockup: rgba(26,39,68,*) — Navy-Tint subtler. Beide Pattern OK, Mockup * passt visuell besser zu Brand-Tokens (--navy/Navy-Tint statt Ink-Tone). * --shadow-hover NEU 2-Z-A fuer Card-Lift-Pattern. */ --shadow-sm: 0 1px 2px rgba(26, 39, 68, 0.04); --shadow-md: 0 2px 6px rgba(26, 39, 68, 0.06), 0 1px 2px rgba(26, 39, 68, 0.04); --shadow-lg: 0 4px 12px rgba(26, 39, 68, 0.08), 0 2px 4px rgba(26, 39, 68, 0.04); --shadow-hover: 0 4px 16px rgba(26, 39, 68, 0.12), 0 2px 6px rgba(26, 39, 68, 0.06); --shadow-hero: 0 22px 50px rgba(31, 26, 20, 0.16), 0 6px 16px rgba(31, 26, 20, 0.08); /* === Layout ============================================================== */ --max-w: 1240px; /* Content-Container max-width */ --pad: clamp(1.5rem, 4vw, 4rem); --sidebar-width: 240px; /* === Transitions (subtle UI-Feedback) ==================================== */ --transition: 0.15s ease; --transition-slow: 0.3s ease; /* Phase 2-Z-A Mockup-Aliasse */ --transition-fast: var(--transition); /* 150ms — Buttons, Hovers */ --transition-base: 250ms ease; /* NEU — Card-Hover-Shadow */ /* === Focus-Ring (Phase 2-Z-A 16.05.) ===================================== * Gold-Glow auf focus-visible. Used by .btn:focus-visible. */ --focus-ring: 0 0 0 3px rgba(184, 136, 74, 0.30); /* === 2-A Phase-Override-Tokens (ELIMINATED in 2-Cy) ===================== * --fip-gold-dezent / --fip-slate-warm / --fip-border-warm / * --fip-shadow-paper waren bis 2-Cy Cascade-Workaround-Aliasse (weil * portal.css 5 :root-Bloecke konkurrierende Werte hatte). In 2-Cy wurden * alle :root-Bloecke entfernt UND die Phase-Override-Tokens auf ihre * canonical Namen (--gold, --slate, --border, --shadow-lg) umbenannt. */ /* === Severity-Banner-Tokens (2-Cy Cy2) =================================== * Bewusst von --severity-critical/-high/-medium/-low/-info getrennt: * Severity sind fuer Findings (Risk-Level), Banner sind fuer System- * Notifications (Status-Feedback). Werte aus Landing v8 banner-System. */ --severity-error: var(--stamp-red); --severity-warning: var(--rust); --severity-success: var(--sage); /* --severity-info bereits oben definiert (--light-slate) */ /* === Legacy-Tokens (DEPRECATED, werden in 2-Czw eliminiert) ============== * Diese Tokens stammten aus den 5 portal.css :root-Bloecken (login.html, * upload.html, dashboard.html, trust-center.html, cockpit-legacy.html). * Pages die sie nutzen werden in 2-Czw migriert; diese Aliasse halten den * Visual-Status bis dahin stabil. Neue Komponenten DUERFEN diese Tokens * NICHT verwenden — sie referenzieren tokens.css-Standard-Tokens direkt. */ --bg: var(--warm-white); --shadow: var(--shadow-sm); --critical: var(--severity-critical); --high: var(--severity-high); --medium: var(--severity-medium); --low: var(--severity-low); --amber: #B07A32; /* legacy dashboard amber */ --steel: #456B96; /* legacy dashboard steel */ --steel-bg: #E2ECF4; --indigo: #6E5BA6; /* legacy state-pill indigo */ --indigo-bg: #E9E3F3; --ap-blue: #2563EB; /* legacy AP-Hebel */ --ap-blue-bg: #EFF4FF; --ar-indigo: #7C3AED; /* legacy AR-Hebel */ --ar-indigo-bg: #F3F0FF; --gold-light: var(--gold-bright); --gold-bg: #FAF4E3; --rust-bg: #F4E4D9; --sage-bg: #EAF1EC; --bg-card: var(--card); --bg-soft: var(--off-white); }