/* ============================================================================= Agora Design-System v1 — tokens.css Einzige Quelle der Wahrheit. Jedes HTML-Artefakt des Systems laedt genau diese Datei; tokens.json und tailwind.preset.ts sind Ableitungen davon. Legende der Herkunft: [S:] aus dem genannten Screenshot abgeleitet [E] EIGENE SETZUNG (aus den Screenshots nicht ablesbar) [A] Agora-Brandvorgabe (unveraenderlich) ============================================================================= */ :root { color-scheme: light; /* --- Neutralskala [E] ----------------------------------------------------- oklch-harmonisiert, minimal warm (Hue ~ 70, Chroma 0.002-0.008), damit die Flaechen unter dem warmen Akzent nicht kippen. HammerUp misst kuehl (#f9fafc / #f3f4f6, [S:h01-dashboard-gesamt.png]); wir setzen bewusst warm-neutral — kein 1:1-Abzug. */ --n-0: #ffffff; --n-25: #fcfcfb; --n-50: #f8f7f5; --n-100: #f2f1ee; --n-200: #e7e5e1; --n-300: #d6d3ce; --n-400: #b1aea8; --n-500: #88857e; --n-600: #66635d; --n-700: #4c4945; --n-800: #34322f; --n-900: #21201d; --n-950: #141311; /* --- Orange-Rampe [A] ----------------------------------------------------- 500 = MARKEN-ORANGE, 600 = INTERAKTIONS-ORANGE. Beide Anker unveraendert. 650 ist die harmonisierte Zwischenstufe fuer Text auf hellem Grund. */ --o-50: #fdf2e9; --o-100: #fde8d9; --o-200: #fbd2b6; --o-300: #f7b28a; --o-400: #f28d59; --o-500: #ee6b2f; --o-600: #c2541b; --o-650: #b34d1a; --o-700: #a8481a; --o-800: #883b17; --o-900: #6b2f13; --o-950: #3f1c0c; /* Rollenaliase der Brandvorgabe */ --accent: var(--o-500); --accent-strong: var(--o-600); --accent-strong-hover: var(--o-700); --accent-text: var(--o-650); --accent-soft: var(--o-100); --accent-soft-2: var(--o-50); /* --- Statusrampen [E] ----------------------------------------------------- Warnung liegt bewusst im Gold-/Gelbbereich (Hue ~ 85), damit sie nie mit dem Marken-Orange verwechselt wird. */ --success-50: #e9f5ee; --success-100: #d1eadd; --success-500: #1f8a5f; --success-600: #17714d; --success-700: #115a3d; --info-50: #eaf1fa; --info-100: #d5e4f5; --info-500: #2f6fbf; --info-600: #245a9e; --info-700: #1b477d; --warning-50: #fdf4dc; --warning-100: #fbe9b8; --warning-500: #c98a06; --warning-600: #a06d04; --warning-700: #7d5503; --danger-50: #fdecea; --danger-100: #fbd9d5; --danger-500: #c8352b; --danger-600: #a52a22; --danger-700: #85211b; /* --- Plattform-Violett [E] — Agora Site, Super-Admin ---------------------- Die Site markiert die Plattform-Konsole mit Lila (#6d28d9 / #7c3aed, dort nicht tokenisiert). Aufgenommen als eigene Rampe, aber auf die Sättigung der übrigen Statusrampen heruntergezogen: das Violett soll neben dem Marken-Orange als *Zuständigkeit* lesen, nicht als zweite Marke. */ --v-50: #f1eefa; --v-100: #e3dcf5; --v-500: #6d4fb8; --v-600: #59409a; --v-700: #46317b; /* --- Sand [E] — neutrales Etikett ---------------------------------------- Für Etiketten, die keinen Status tragen (Einheiten, Gewerke, Kategorien). Warmes Beige statt Grau, damit „ohne Status" nicht wie „deaktiviert" wirkt. */ --sand-50: #f7f2e6; --sand-100: #eee5d0; --sand-500: #8a7a52; --sand-600: #6e6141; --sand-700: #574c33; /* --- Diagrammpalette [E] — gleiche Helligkeit/Chroma, gestreute Hues ----- */ --chart-1: #ee6b2f; --chart-2: #2f7d72; --chart-3: #3a6ea8; --chart-4: #7a5aa0; --chart-5: #b3821c; --chart-6: #b8556b; --chart-grid: var(--n-200); --chart-axis: var(--n-400); --chart-empty: var(--n-100); /* Diagrammblau getrennt von Statusblau: Flächen und Linien dürfen sättigen, ein Status-Etikett nicht. Wer beides aus einem Token zieht, bekommt entweder blasse Charts oder schreiende Etiketten. */ --chart-blue: var(--chart-3); /* =========================== Semantische Rollen ========================== */ /* Flaechen */ --surface-page: var(--n-50); --surface-1: var(--n-0); --surface-2: var(--n-100); --surface-3: var(--n-200); --surface-inverse: var(--n-900); --surface-overlay: rgba(33, 32, 29, 0.45); --surface-accent-soft: var(--o-100); --surface-accent-soft-2: var(--o-50); /* Text */ --text-primary: var(--n-900); --text-secondary: var(--n-700); --text-muted: var(--n-500); --text-disabled: var(--n-400); --text-inverse: var(--n-0); --text-accent: var(--o-650); --text-link: var(--o-650); --text-on-accent: #ffffff; /* Raender */ --border-subtle: var(--n-200); --border-default: var(--n-300); --border-strong: var(--n-400); --border-accent: var(--o-500); /* Interaktion */ --interactive-solid: var(--o-600); --interactive-solid-hover: var(--o-700); --interactive-solid-active: var(--o-800); --interactive-fg: var(--o-600); --interactive-soft: var(--o-100); --interactive-soft-hover: var(--o-200); --interactive-ghost-hover: var(--n-100); --focus-ring-color: var(--o-600); --focus-ring: 0 0 0 2px var(--surface-1), 0 0 0 4px var(--focus-ring-color); --form-accent: var(--o-600); /* Navigation [S:h01-sidebar-ausgeklappt.png] — Anatomie uebernommen, Farbe eigen: HammerUp faerbt den aktiven Pill neutral (#ebebeb, GEMESSEN), Agora setzt ihn auf accent-soft mit accent-strong Schrift. */ --nav-active-bg: var(--o-100); /* Kontrast-Korrektur (Sidebar-Redesign, Variante A): --o-600 auf --nav-active-bg (--o-100) misst nur 3,87:1 und verfehlt WCAG AA fuer Text; --o-700 erreicht 4,91:1. Dark-Block bleibt bei --o-300 (8,31:1), unveraendert. */ --nav-active-fg: var(--o-700); --nav-idle-fg: var(--n-600); --nav-hover-bg: var(--n-100); /* Statusrollen */ --status-success-surface: var(--success-50); --status-success-border: var(--success-100); --status-success-fg: var(--success-600); --status-success-solid: var(--success-600); --status-info-surface: var(--info-50); --status-info-border: var(--info-100); --status-info-fg: var(--info-600); --status-info-solid: var(--info-600); --status-warning-surface: var(--warning-50); --status-warning-border: var(--warning-100); --status-warning-fg: var(--warning-700); --status-warning-solid: var(--warning-700); --status-danger-surface: var(--danger-50); --status-danger-border: var(--danger-100); --status-danger-fg: var(--danger-600); --status-danger-solid: var(--danger-600); --status-neutral-surface: var(--n-100); --status-neutral-border: var(--n-200); --status-neutral-fg: var(--n-600); --status-neutral-solid: var(--n-600); --status-accent-surface: var(--o-50); --status-accent-border: var(--o-100); --status-accent-fg: var(--o-650); --status-accent-solid: var(--o-500); --status-admin-surface: var(--v-50); --status-admin-border: var(--v-100); --status-admin-fg: var(--v-600); --status-admin-solid: var(--v-600); --status-sand-surface: var(--sand-50); --status-sand-border: var(--sand-100); --status-sand-fg: var(--sand-700); --status-sand-solid: var(--sand-600); /* Zweite Weichheitsstufe [E] — aus der Site übernommen --------------------- `surface` ist der leise Tint (50er), `mild` der laute (100er). Beide tragen AA-Text; mild wird gewählt, wenn das Etikett auf einer bereits getönten Fläche liegt und der 50er darauf verschwindet. */ --status-success-mild: var(--success-100); --status-success-mild-fg: var(--success-700); --status-info-mild: var(--info-100); --status-info-mild-fg: var(--info-700); --status-warning-mild: var(--warning-100); --status-warning-mild-fg: var(--warning-700); --status-danger-mild: var(--danger-100); --status-danger-mild-fg: var(--danger-700); --status-neutral-mild: var(--n-200); --status-neutral-mild-fg: var(--n-700); --status-accent-mild: var(--o-100); --status-accent-mild-fg: var(--o-700); --status-admin-mild: var(--v-100); --status-admin-mild-fg: var(--v-700); --status-sand-mild: var(--sand-100); --status-sand-mild-fg: var(--sand-700); /* Navigation der Plattform-Konsole — eigene Zuständigkeit, eigene Farbe */ --nav-admin-fg: var(--v-600); --nav-admin-active-bg: var(--v-50); --nav-admin-active-fg: var(--v-700); /* --- Marker auf Plan und Karte [E] — Agora Site -------------------------- Vier Zustände, jeder mit Symbol oder Text daneben (Farbe trägt nie allein). Der Ring des geschlossenen Markers ist heller als die Fläche, damit ein abgehakter Marker auf dunklen Planflächen noch als Ring erkennbar bleibt. */ --marker-open-solid: var(--o-500); --marker-progress-solid: var(--info-500); --marker-closed-solid: var(--success-500); --marker-closed-ring: #4fb98d; --marker-defect-solid: var(--danger-500); --marker-stroke: #ffffff; --marker-shadow: 0 1px 2px rgba(20,19,17,.35), 0 4px 10px rgba(20,19,17,.25); /* --- Radien [S:h01-dashboard-gesamt.png, h05-rechnungsliste.png] --------- */ --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 10px; --r-xl: 14px; --r-2xl: 20px; --r-pill: 999px; /* --- Abstandsskala [S, 4er-Raster] -------------------------------------- */ --sp-0: 0px; --sp-05: 2px; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10:40px; --sp-12:48px; --sp-16:64px; /* --- Elevation [S] — sehr zurueckhaltend, Rand traegt, Schatten stuetzt -- */ --e-0: none; --e-1: 0 1px 2px rgba(20,19,17,.05); --e-2: 0 1px 3px rgba(20,19,17,.06), 0 4px 12px rgba(20,19,17,.05); --e-3: 0 2px 6px rgba(20,19,17,.07), 0 12px 28px rgba(20,19,17,.09); --e-4: 0 4px 10px rgba(20,19,17,.08), 0 24px 56px rgba(20,19,17,.14); /* --- Typografie --------------------------------------------------------- */ --font-ui: 'Figtree', ui-sans-serif, system-ui, 'Segoe UI', Helvetica, Arial, sans-serif; --font-print: 'Source Serif 4', 'Iowan Old Style', Georgia, 'Times New Roman', serif; --font-num: var(--font-ui); --fs-display: 40px; --lh-display: 46px; --fs-h1: 30px; --lh-h1: 36px; --fs-h2: 24px; --lh-h2: 30px; --fs-h3: 19px; --lh-h3: 26px; --fs-h4: 16px; --lh-h4: 22px; --fs-body-lg: 16px; --lh-body-lg: 24px; --fs-body: 14px; --lh-body: 20px; --fs-sm: 13px; --lh-sm: 18px; --fs-caption: 12px; --lh-caption: 16px; --fs-overline: 11px; --lh-overline: 14px; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --ls-tight: -0.02em; --ls-normal: 0em; --ls-overline: 0.07em; /* --- Motion [E] --------------------------------------------------------- */ --dur-instant: 80ms; --dur-fast: 140ms; --dur-base: 200ms; --dur-slow: 320ms; --dur-slower: 480ms; --ease-standard: cubic-bezier(.2, 0, 0, 1); --ease-entrance: cubic-bezier(0, 0, 0, 1); --ease-exit: cubic-bezier(.3, 0, 1, 1); --ease-emphasized: cubic-bezier(.2, 0, 0, 1); /* --- Ebenen [E] --------------------------------------------------------- */ --z-base: 0; --z-sticky: 100; --z-drawer: 300; --z-modal: 400; --z-popover: 500; --z-toast: 600; --z-tooltip: 700; /* --- Druckflächen [E] — kundengerichtet, bewusst konservativer ---------- Maße in pt/mm, weil Druckereien und Vorlagen in diesen Einheiten denken. Referenz für die Anatomie: h05-pdf-vorschau-r00101. */ --print-page-w: 210mm; --print-page-h: 297mm; --print-margin-x: 20mm; --print-margin-top: 18mm; --print-margin-bottom: 16mm; --print-fs-body: 10pt; --print-lh-body: 14pt; --print-fs-small: 8pt; --print-lh-small: 11pt; --print-fs-h1: 16pt; --print-lh-h1: 20pt; --print-fs-h2: 11pt; --print-lh-h2: 15pt; --print-fs-sum: 12pt; --print-rule: 0.4pt; --print-ink: #1a1a18; --print-ink-soft: #55524c; --print-ink-faint: #8a8680; --print-line: #c9c5be; --print-band: #f2f1ee; /* --- Layout [S] --------------------------------------------------------- */ --layout-sidebar: 232px; --layout-sidebar-collapsed: 68px; --layout-content-max: 1392px; --layout-gutter: 24px; --control-h-sm: 32px; --control-h-md: 38px; --control-h-lg: 44px; --row-h: 56px; --row-h-compact: 40px; --icon-sm: 16px; --icon-md: 20px; --icon-lg: 24px; } /* ============================================================================= Dark Mode — EIGENE SETZUNG [E] Ableitungsregel: Flaechen steigen mit der Ebene auf (page dunkelster Wert), Rampen bleiben identisch, nur Rollen werden neu gebunden. Das Interaktions- Orange #c2541b traegt auf dunklem Grund zu wenig; dort uebernimmt das MARKEN-Orange #ee6b2f die Flaechenrolle und bekommt dunkle Schrift. ============================================================================= */ [data-theme="dark"] { color-scheme: dark; --surface-page: #141311; --surface-1: #1c1a18; --surface-2: #242220; --surface-3: #2d2b28; --surface-inverse: var(--n-100); --surface-overlay: rgba(8, 8, 7, 0.62); --surface-accent-soft: #3a2114; --surface-accent-soft-2: #2a1810; --text-primary: #f4f2ef; --text-secondary: #cec9c2; --text-muted: #9c968d; --text-disabled: #6b665f; --text-inverse: var(--n-950); --text-accent: var(--o-300); --text-link: var(--o-300); --text-on-accent: var(--n-950); --border-subtle: #302e2b; --border-default: #3f3c38; --border-strong: #56524c; --border-accent: var(--o-500); --interactive-solid: var(--o-500); --interactive-solid-hover: var(--o-400); --interactive-solid-active: var(--o-300); --interactive-fg: var(--o-300); --interactive-soft: #3a2114; --interactive-soft-hover: #4b2a18; --interactive-ghost-hover: #242220; --focus-ring-color: var(--o-400); --form-accent: var(--o-500); --nav-active-bg: #3a2114; --nav-active-fg: var(--o-300); --nav-idle-fg: #a9a49b; --nav-hover-bg: #242220; --status-success-surface: #12291f; --status-success-border: #1d4433; --status-success-fg: #6fcf9b; --status-success-solid: var(--success-500); --status-info-surface: #131f2e; --status-info-border: #1e3550; --status-info-fg: #86b4e8; --status-info-solid: var(--info-500); --status-warning-surface: #2b2210; --status-warning-border: #4a3a17; --status-warning-fg: #e3ba55; --status-warning-solid: var(--warning-500); --status-danger-surface: #2d1614; --status-danger-border: #4d2420; --status-danger-fg: #f09187; --status-danger-solid: var(--danger-500); --status-neutral-surface: #242220; --status-neutral-border: #3f3c38; --status-neutral-fg: #b6b1a9; --status-neutral-solid: var(--n-500); --status-accent-surface: #2a1810; --status-accent-border: #4a2a18; --status-accent-fg: var(--o-300); --status-accent-solid: var(--o-500); --status-admin-surface: #1e1830; --status-admin-border: #362a55; --status-admin-fg: #b9a5e8; --status-admin-solid: #7a5cc4; --status-sand-surface: #262218; --status-sand-border: #443c28; --status-sand-fg: #d6c69c; --status-sand-solid: #a3906a; --status-success-mild: #1d4433; --status-success-mild-fg: #8fdcb4; --status-info-mild: #1e3550; --status-info-mild-fg: #a6cbf2; --status-warning-mild: #4a3a17; --status-warning-mild-fg: #edcd77; --status-danger-mild: #4d2420; --status-danger-mild-fg: #f5aca3; --status-neutral-mild: #3f3c38; --status-neutral-mild-fg: #cfcac2; --status-accent-mild: #4b2a18; --status-accent-mild-fg: var(--o-300); --status-admin-mild: #362a55; --status-admin-mild-fg: #cbbcf0; --status-sand-mild: #443c28; --status-sand-mild-fg: #e3d6b4; --nav-admin-fg: #b9a5e8; --nav-admin-active-bg: #1e1830; --nav-admin-active-fg: #cbbcf0; --marker-open-solid: var(--o-500); --marker-progress-solid: var(--info-500); --marker-closed-solid: var(--success-500); --marker-closed-ring: #6fcf9b; --marker-defect-solid: var(--danger-500); --marker-stroke: #141311; --marker-shadow: 0 1px 2px rgba(0,0,0,.55), 0 4px 12px rgba(0,0,0,.5); --chart-grid: #2d2b28; --chart-axis: #6b665f; --chart-empty: #242220; --chart-blue: #5b93d6; --e-1: 0 1px 2px rgba(0,0,0,.40); --e-2: 0 1px 3px rgba(0,0,0,.45), 0 4px 12px rgba(0,0,0,.40); --e-3: 0 2px 6px rgba(0,0,0,.50), 0 12px 28px rgba(0,0,0,.48); --e-4: 0 4px 10px rgba(0,0,0,.55), 0 24px 56px rgba(0,0,0,.60); } @media (prefers-reduced-motion: reduce) { :root { --dur-instant: 1ms; --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; --dur-slower: 1ms; } }