/* ============================================================================= * 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) * ------------------------------------------------------------------- */ --ff-bg-base: #FAFAF9; /* neutralgrau, kein Beige-Stich */ --ff-bg-elevated: #FFFFFF; --ff-bg-subtle: #F4F4F2; /* 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: #E5E5E2; --ff-border-strong: #D0D0CC; --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: #4C8A30; --ff-success-subtle: #E8F1DC; --ff-warning: #A87810; --ff-warning-subtle: #FBEFC9; --ff-danger: #B83A2A; --ff-danger-subtle: #F6DAD3; --ff-saldo-positiv: var(--ff-text-primary); --ff-saldo-negativ: #B83A2A; --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 { --ff-bg-base: #0F1114; /* neutralgrau-dunkel, kein Braun-Anteil */ --ff-bg-elevated: #181A1E; --ff-bg-subtle: #1F2227; --ff-bg-overlay: rgba(0, 0, 0, 0.7); --ff-text-primary: #EAECEE; --ff-text-secondary: #C8CBD0; --ff-text-muted: #9DA1A8; --ff-text-faint: #828690; --ff-text-disabled: #54585F; --ff-text-on-accent: #0F1114; --ff-border: #2A2D33; --ff-border-strong: #3A3D44; --ff-border-focus: #D9482E; --ff-accent: #D9482E; /* Lava, heller im Dark */ --ff-accent-hover: #C03A20; --ff-accent-subtle: #3A1F16; --ff-accent-text-on: #0F1114; --ff-success: #79B25A; --ff-success-subtle: #1F2D17; --ff-warning: #D9A53D; --ff-warning-subtle: #322610; --ff-danger: #E36655; --ff-danger-subtle: #3A1812; --ff-saldo-positiv: var(--ff-text-primary); --ff-saldo-negativ: #E36655; --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; }