/* ============================================================================= * ff-design/tokens.css — Design-Tokens (Design-System v4 "Lava + Neutralgrau") * ----------------------------------------------------------------------------- * Single Source of Truth fuer Farben, Schatten, Radien, Z-Index. Verbindliche * Referenz: docs/architektur/05-design-tokens.md. * * V4 (25.05.2026) — Lava-Akzent statt Glut. Neutralgrau ohne Braun-Anteil. * Light-Akzent: #C03A20 (dunkles Lava) * Dark-Akzent: #D9482E (helleres Lava) * Hintergruende sind reines Neutralgrau, keine warmen Beige/Braun-Toene mehr. * * Zwei Namens-Schichten: * 1. --ff-* (legacy v2-Naming) — Tailwind via @theme in src/main/frontend/css/input.css. * 2. --bg-base, --accent, --state-ok etc. (v3-Naming) — direkte CSS-Aliase. * Beide Schichten zeigen auf dieselben Werte; die Doppelung ist Absicht. * * Dark-Mode wird ueber die Klasse .dark am -Element gesteuert * (theme.js setzt sie synchron im , kein FOUC). Dark ist Default. * ===========================================================================*/ :root { /* --------------------------------------------------------------------- * Farben — Light Mode (Lava + Neutralgrau) * V4.1: helleres Grau statt Weiss. * bg-base #FAFAF9 -> #F0F0EE (deutlich grauer Grund, macOS-Settings-Look) * bg-elevated #FFFFFF -> #FAFAF9 (Karten eine Stufe heller, behaelt Schichtung) * bg-subtle #F4F4F2 -> #E8E8E5 (Hover noch tiefer als bg-base) * Text-/Border-Tokens unveraendert — Kontraste bleiben WCAG-AA. * ------------------------------------------------------------------- */ --ff-bg-base: #F0F0EE; /* helles Neutralgrau, kein Beige-Stich */ --ff-bg-elevated: #FAFAF9; --ff-bg-subtle: #E8E8E5; /* Hover, alternierende Zeilen */ --ff-bg-overlay: rgba(15, 17, 20, 0.55); --ff-text-primary: #14161A; --ff-text-secondary: #3A3D44; --ff-text-muted: #5B5F66; --ff-text-faint: #84878D; --ff-text-disabled: #B0B4BC; --ff-text-on-accent: #FFFFFF; --ff-border: #D9D9D4; --ff-border-strong: #BFBFB9; --ff-border-focus: #C03A20; --ff-accent: #C03A20; /* Lava, dunkler im Light */ --ff-accent-hover: #A52E18; --ff-accent-subtle: #FAE5DE; /* helles Lava-Wash */ --ff-accent-text-on: #FFFFFF; --ff-success: #15803D; --ff-success-subtle: #D9F0E0; --ff-warning: #ED6A12; --ff-warning-subtle: #FCE3D0; --ff-danger: #BE123C; --ff-danger-subtle: #FBD9E0; --ff-saldo-positiv: var(--ff-text-primary); --ff-saldo-negativ: #BE123C; --ff-saldo-null: var(--ff-text-primary); /* --------------------------------------------------------------------- * Schatten — minimal, vier Stufen * ------------------------------------------------------------------- */ --ff-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06); --ff-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --ff-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.10); --ff-shadow-focus: 0 0 0 3px rgba(192, 58, 32, 0.30); /* --------------------------------------------------------------------- * Radien — Drei-Stufen-Trias (10/6/Pill). * ------------------------------------------------------------------- */ --ff-radius-xs: 0.25rem; --ff-radius-md: 0.375rem; --ff-radius-lg: 0.625rem; --ff-radius-xl: 0.875rem; --ff-radius-full: 9999px; /* --------------------------------------------------------------------- * Z-Index-Skala — diskret. * ------------------------------------------------------------------- */ --ff-z-base: 0; --ff-z-sticky: 10; --ff-z-dropdown: 20; --ff-z-toast: 30; --ff-z-modal: 40; --ff-z-modal-content: 50; --ff-z-screensaver: 9000; /* --------------------------------------------------------------------- * Schriftgrad-Skalierung (Settings, Phase 7). * Default 1.0, JS setzt auf 0.9 (S) / 1.0 (M) / 1.15 (L). * ------------------------------------------------------------------- */ --ff-text-scale: 1.0; /* --------------------------------------------------------------------- * v3-Naming-Aliase nach docs/architektur/05-design-tokens.md. * ------------------------------------------------------------------- */ --bg-base: var(--ff-bg-base); --bg-elevated: var(--ff-bg-elevated); --bg-hover: var(--ff-bg-subtle); --text-primary: var(--ff-text-primary); --text-muted: var(--ff-text-muted); --text-faint: var(--ff-text-faint); --text-disabled: var(--ff-text-disabled); --border: var(--ff-border); --border-strong: var(--ff-border-strong); --accent: var(--ff-accent); --accent-hover: var(--ff-accent-hover); --accent-soft: var(--ff-accent-subtle); --accent-text-on: var(--ff-accent-text-on); --state-ok: var(--ff-success); --state-warn: var(--ff-warning); --state-err: var(--ff-danger); --shadow-1: var(--ff-shadow-sm); --shadow-2: var(--ff-shadow-md); } /* --------------------------------------------------------------------------- * Dark Mode (Default-Erlebnis). * ------------------------------------------------------------------------- */ :root.dark { /* V5 (15.06.2026) — EIN neutrales Mittelgrau-Theme ("Graphit"), Mittelding * zwischen Dark und Light: bei Tageslicht wie im Dunkeln angenehm, kein * grelles Weiss, kein Fast-Schwarz. Schrift durchgehend hell, AUCH auf dem * Lava-Akzent (vorher dunkel -> schwarze Tab-Schrift). Light-Tokens (:root) * bleiben erhalten, sind aber deaktiviert (theme.js erzwingt diesen Modus). */ --ff-bg-base: #4C4F55; /* neutrales Mittelgrau, weisse Schrift ~9:1 */ --ff-bg-elevated: #585C63; /* Karten heben sich heller ab */ --ff-bg-subtle: #43464C; /* Hover/Zeilen etwas tiefer als der Grund */ --ff-bg-overlay: rgba(0, 0, 0, 0.55); --ff-text-primary: #F4F5F6; --ff-text-secondary: #E0E2E5; --ff-text-muted: #C4C7CC; /* A11y: war #A6AAB0 (3.52:1 auf bg-base, unter WCAG-AA). Auf #C9CCD1 angehoben -> 5.10:1 auf bg-base (AA fuer Normaltext). text-faint wird fuer echte Text-Untertitel genutzt (Login-Sublines, Kontext-Labels), nicht nur Deko. */ --ff-text-faint: #C9CCD1; --ff-text-disabled: #83878E; --ff-text-on-accent: #FFFFFF; /* WEISS auf Lava (war dunkel) */ --ff-border: #5F636B; --ff-border-strong: #787D86; --ff-border-focus: #E85A3E; --ff-accent: #C23B20; /* Lava minimal dunkler -> Weiss AA-lesbar (4.7:1) */ --ff-accent-hover: #A93216; --ff-accent-subtle: #5A3024; --ff-accent-text-on: #FFFFFF; --ff-accent-bright: #EC8862; /* helle Lava — warmer Glut-Look, auf Mittelgrau lesbar (Akzent-Text/Sublines) */ --ff-success: #4CBF77; --ff-success-subtle: #16291C; --ff-warning: #F47C30; --ff-warning-subtle: #3A220F; --ff-danger: #F24B6E; --ff-danger-subtle: #3A1320; --ff-saldo-positiv: var(--ff-text-primary); --ff-saldo-negativ: #F24B6E; --ff-saldo-null: var(--ff-text-primary); --ff-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45); --ff-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.55); --ff-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.65); --ff-shadow-focus: 0 0 0 3px rgba(217, 72, 46, 0.40); } /* --------------------------------------------------------------------------- * Globale Basis-Defaults. Tailwind-Preflight macht den Rest. * ------------------------------------------------------------------------- */ html { background-color: var(--ff-bg-base); color: var(--ff-text-primary); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { background-color: var(--ff-bg-base); color: var(--ff-text-primary); min-height: 100vh; background-image: url("/img/grain.svg"); background-repeat: repeat; background-attachment: fixed; }