/* ============================================================= ImmoMgmt Design Tokens — Basis-Layer (Redesign W1) ------------------------------------------------------------- Umbrella-Karte 3e892700 · Klickdummy-Referenz: clickdummy/redesign-w1/ (von Heiner freigegeben). OP-3 (Token-SSOT-Konsolidierung): Diese Datei wird NICHT mehr von Hand gepflegt. Der :root-Block unten wird aus der EINEN Quelle `design-tokens/tokens-base/base.json` (DTCG) generiert (`design-tokens/build.js`, `npm run build:tokens`) und zwischen den AUTO-GENERATED-Sentinels idempotent injiziert. Werte hier NICHT direkt editieren — stattdessen `tokens-base/base.json` anpassen und neu bauen. Der Marken-Ton hat genau EINE Quelle: die drei `brand-h/s/l`-Tokens in base.json. CI/CD-Farbwechsel = NUR diese drei Werte tauschen (oder ein fertiges data-theme am setzen), dann `npm run build:tokens`. Wird in base.html VOR app.css eingebunden, damit app.css seine Marken-Primitive auf diese Tokens brücken kann (additiv, ohne die bestehenden Funktionsklassen zu zerstören). ============================================================= */ /* >>> AUTO-GENERATED design tokens (design-tokens/) — do not edit by hand <<< */ :root { --brand-h: 225.3; --brand-s: 75.1%; --brand-l: 60.6%; --brand: hsl(var(--brand-h) var(--brand-s) var(--brand-l)); --brand-600: #3A5CD4; --brand-700: #273C8E; --brand-100: hsl(var(--brand-h) calc(var(--brand-s) - 20%) 94%); --brand-050: hsl(var(--brand-h) calc(var(--brand-s) - 25%) 97%); --brand-contrast: #ffffff; --anthracite: #26292E; --silver: #C9CED4; --silver-2: #E4E7EB; --gray-050: #f7f8fa; --gray-100: #eef1f5; --gray-200: #e2e7ee; --gray-300: #cfd6e0; --gray-400: #9aa4b2; --gray-500: #6b7684; --gray-600: #4b5563; --gray-700: #343b46; --gray-800: #212832; --gray-900: #131820; --success: #12885f; --success-bg: #e6f6ee; --success-light-bg: #eef7f1; --success-light-border: #cbe7d7; --success-light-text: #15803d; --warning: #b7791f; --warning-bg: #fbf1dc; --danger: #c0392b; --danger-bg: #fbe9e7; --info: #2a6fb0; --info-bg: #e7f0fa; --bg-app: var(--gray-050); --bg-surface: #ffffff; --bg-sunken: var(--gray-100); --bg-sidebar: #ffffff; --border: var(--gray-200); --border-strong: var(--gray-300); --text: var(--gray-800); --text-muted: var(--gray-500); --text-faint: var(--gray-400); --text-invert: #ffffff; --link: var(--brand-700); --radius-sm: 6px; --radius: 10px; --radius-lg: 16px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(19,24,32,.06), 0 1px 3px rgba(19,24,32,.05); --shadow-md: 0 4px 12px rgba(19,24,32,.08), 0 2px 6px rgba(19,24,32,.06); --shadow-lg: 0 12px 32px rgba(19,24,32,.14); --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 20px; --fs-2xl: 26px; --fs-3xl: 32px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-8: 48px; --sidebar-w: 236px; --topbar-h: 60px; } /* <<< END AUTO-GENERATED design tokens >>> */ /* -------- FERTIGE ALTERNATIV-THEMES (Demo für den CI/CD-Change) -------- Ein einziges Attribut am tauscht die komplette App-Farbe. (Hand-gepflegt: Demo-Overrides der drei Marken-HSL-Werte, kein Token-Layer.) */ :root[data-theme="indigo"] { --brand-h: 244; --brand-s: 62%; --brand-l: 55%; } :root[data-theme="royal"] { --brand-h: 214; --brand-s: 80%; --brand-l: 48%; } :root[data-theme="plum"] { --brand-h: 291; --brand-s: 46%; --brand-l: 48%; } :root[data-theme="sunset"] { --brand-h: 18; --brand-s: 82%; --brand-l: 52%; } :root[data-theme="forest"] { --brand-h: 142; --brand-s: 52%; --brand-l: 38%; } :root[data-theme="slate"] { --brand-h: 215; --brand-s: 18%; --brand-l: 34%; }