/* ─── cohrteam Design System — Design Tokens (ADR-028) ──────────────────── Grundlage: BAP-Architekturhandbuch, Kapitel „Frontend" (UI-Design-Architecture.md v2.0.0, Theme-and-Branding.md v2.0.0). Rohpalette und Farbkonzept 1:1 aus dem Handbuch übernommen (Entscheidung 2026-08-20, siehe ADR-028) — bewusst NICHT das cohrteam-CD-Manual (Navy/Korall/ Gelb/Grün), das für Marketing-/Webflow-/Cloudinary-Assets eigenständig maßgeblich bleibt. Zwei Ebenen (siehe Handbuch, Abschnitt „Token-Schichten"): 1. Rohpalette (--ct-palette-*) — Implementierungsdetail, wird NUR innerhalb dieser Datei referenziert. 2. Semantische Tokens (--ct-*) — öffentliche Nutzungsoberfläche für ct.*-Controls und Fachmodule. Fachcode referenziert ausschließlich semantische Tokens, nie die Rohpalette. Diese Datei wird nach erp-launchpad.css und vor einer eventuellen Tenant-CSS-Datei geladen (siehe BrandingLoader.js) — dieselbe Spezifitäts-Konvention wie in erp-launchpad.css gilt auch hier: einfache Einzelklassen-/Attribut-Selektoren, damit eine Tenant-CSS-Datei diese Standard-Optik zuverlässig überschreiben kann. */ :root { /* ── Rohpalette (Handbuch-Farbkonzept, siehe 06-farbkonzept.png) ───────── */ --ct-palette-cyan-500: #50e7ff; --ct-palette-cyan-200: #acf4ff; --ct-palette-cyan-700: #0c95cf; --ct-palette-violet-700: #483f59; --ct-palette-blue-050: #ebf5ff; --ct-palette-yellow-200: #f9e5ae; --ct-palette-yellow-400: #ffdb80; --ct-palette-yellow-500: #ffd255; --ct-palette-pink-300: #f092b4; --ct-palette-pink-600: #e22b6c; --ct-palette-pink-700: #c32b5d; --ct-palette-purple-300: #93889e; --ct-palette-purple-600: #554466; --ct-palette-purple-800: #41274a; --ct-palette-green-300: #97b899; --ct-palette-green-500: #6abc84; --ct-palette-green-700: #17805e; /* Dunklere Gold-Ableitung, nicht im Handbuch-Bild benannt — für Kategoriepalette/Avatar- Varianten mit ausreichendem Kontrast auf hellem Grund (--ct-palette-yellow-* sind dafür zu hell). */ --ct-palette-gold-700: #a06a00; /* Neutralachse (Text/Border/Surface) — im Handbuch-Farbkonzept-Bild nicht explizit als Rohwerte benannt, aus dem Zielbild (helle, ruhige Inhaltsflächen, dunkle Seitennavigation) abgeleitet. Werden bei Bedarf im Zuge der Views-Migration (AP4) gegen die Mockups nachjustiert. */ --ct-palette-neutral-000: #ffffff; --ct-palette-neutral-050: #f7f8fa; --ct-palette-neutral-100: #eceef2; --ct-palette-neutral-300: #c7ccd6; --ct-palette-neutral-500: #7c8496; --ct-palette-neutral-700: #454b59; --ct-palette-neutral-900: #1c1f26; /* ── Surface ─────────────────────────────────────────────────────────── */ --ct-color-surface-page: var(--ct-palette-blue-050); --ct-color-surface-card: var(--ct-palette-neutral-000); --ct-color-surface-overlay: var(--ct-palette-neutral-000); --ct-color-surface-navigation: var(--ct-palette-violet-700); --ct-color-surface-sunken: var(--ct-palette-neutral-050); /* ── Text ────────────────────────────────────────────────────────────── */ --ct-color-text-default: var(--ct-palette-neutral-900); --ct-color-text-muted: var(--ct-palette-neutral-500); --ct-color-text-inverse: var(--ct-palette-neutral-000); --ct-color-text-link: var(--ct-palette-cyan-700); --ct-color-text-on-navigation: var(--ct-palette-neutral-000); /* ── Action ──────────────────────────────────────────────────────────── */ --ct-color-action-primary-background: var(--ct-palette-cyan-700); --ct-color-action-primary-background-hover: #0a7fb0; --ct-color-action-primary-background-active: #086a94; --ct-color-action-primary-text: var(--ct-palette-neutral-000); --ct-color-action-secondary-border: var(--ct-palette-neutral-300); --ct-color-action-disabled-background: var(--ct-palette-neutral-100); --ct-color-action-disabled-text: var(--ct-palette-neutral-500); /* ── Brand (einziger tenantänderbarer Farbeintrag, siehe Theme-and-Branding) ─ Fällt auf die vom Tenant konfigurierte Markenfarbe zurück (--erp-primary-color, von BrandingLoader.js zur Laufzeit gesetzt — bestehender Mechanismus, unverändert), erst danach auf den Handbuch-Cyan-Akzent. Nur dieses eine Token ist tenantabhängig — alle anderen Farb-Tokens bleiben plattformkontrolliert (siehe Token-Kategorien-Tabelle im Handbuch). */ --ct-color-brand-accent: var(--erp-primary-color, var(--ct-palette-cyan-500)); /* ── Focus ───────────────────────────────────────────────────────────── */ --ct-focus-color: var(--ct-palette-cyan-700); --ct-focus-width: 2px; --ct-focus-offset: 1px; /* ── Status (plattformkontrolliert, siehe UID-012) ──────────────────────── */ --ct-color-status-success: var(--ct-palette-green-500); --ct-color-status-success-background: #eaf6ee; --ct-color-status-warning: var(--ct-palette-yellow-500); --ct-color-status-warning-background: #fff6e0; /* Gelb auf Gelb erfüllt keinen Textkontrast (siehe THEME-007) — eigener dunkler Textton statt --ct-color-status-warning direkt für beschrifteten Warnungstext verwenden. */ --ct-color-status-warning-text: #8a6400; --ct-color-status-error: var(--ct-palette-pink-600); --ct-color-status-error-background: #fdeaf0; --ct-color-status-information: var(--ct-palette-cyan-700); --ct-color-status-information-background: #e6f7fc; --ct-color-status-neutral: var(--ct-palette-purple-300); --ct-color-status-neutral-background: var(--ct-palette-neutral-100); /* ── Border ──────────────────────────────────────────────────────────── */ --ct-color-border-default: var(--ct-palette-neutral-300); --ct-color-border-strong: var(--ct-palette-neutral-500); --ct-color-border-divider: var(--ct-palette-neutral-100); /* ── Spacing (4px-Raster) ────────────────────────────────────────────── */ --ct-spacing-xxs: 0.25rem; --ct-spacing-xs: 0.5rem; --ct-spacing-s: 0.75rem; --ct-spacing-m: 1rem; --ct-spacing-l: 1.5rem; --ct-spacing-xl: 2rem; --ct-spacing-xxl: 3rem; /* ── Shape ───────────────────────────────────────────────────────────── */ --ct-radius-control: 6px; --ct-radius-card: 10px; --ct-radius-pill: 999px; /* ── Shadow ──────────────────────────────────────────────────────────── */ --ct-shadow-card: 0 1px 2px rgba(28, 31, 38, 0.06), 0 1px 3px rgba(28, 31, 38, 0.08); --ct-shadow-overlay: 0 8px 24px rgba(28, 31, 38, 0.16); /* ── Kategoriepalette (ct.Avatar-Varianten, künftig Diagramme) ────────── Farbenblindheitstauglich unterscheidbar; NICHT für Status verwenden (siehe UID-012 — Status bleibt ausschließlich --ct-color-status-*). */ --ct-color-category-1: var(--ct-palette-cyan-700); --ct-color-category-2: var(--ct-palette-violet-700); --ct-color-category-3: var(--ct-palette-pink-600); --ct-color-category-4: var(--ct-palette-green-700); --ct-color-category-5: var(--ct-palette-gold-700); --ct-color-category-6: var(--ct-palette-purple-600); /* ── Typography ──────────────────────────────────────────────────────── */ --ct-font-family: "72", "Segoe UI", Arial, sans-serif; --ct-font-size-s: 0.8125rem; --ct-font-size-m: 0.875rem; --ct-font-size-l: 1rem; --ct-font-size-xl: 1.25rem; --ct-font-weight-regular: 400; --ct-font-weight-bold: 600; }