/* ============================================================ OFIRA – DESIGN SYSTEM Alle Designentscheidungen als CSS Custom Properties. NIEMALS Farbwerte, Abstände oder Größen hardcodieren. IMMER diese Tokens verwenden. Stand: 2026 ============================================================ */ :root { /* ============================================ FARBEN – PRIMÄR (Blau) Verwendet für: Aktive Zustände, CTAs, Links, Fokus-Ringe, aktive Sidebar-Items ============================================ */ --color-primary-50: #eff6ff; --color-primary-100: #dbeafe; --color-primary-200: #bfdbfe; --color-primary-300: #93c5fd; --color-primary-400: #60a5fa; --color-primary-500: #3b82f6; --color-primary-600: #2563eb; --color-primary-700: #1d4ed8; --color-primary-800: #1e40af; --color-primary-900: #1e3a8a; /* ============================================ FARBEN – NEUTRAL (Grau-Skala) Basis für alle UI-Elemente, Hintergründe, Texte und Rahmen ============================================ */ --color-neutral-0: #ffffff; --color-neutral-50: #f8fafc; --color-neutral-100: #f1f5f9; --color-neutral-200: #e2e8f0; --color-neutral-300: #cbd5e1; --color-neutral-400: #94a3b8; --color-neutral-500: #64748b; --color-neutral-600: #475569; --color-neutral-700: #334155; --color-neutral-800: #1e293b; --color-neutral-900: #0f172a; /* ============================================ FARBEN – SUCCESS (Gruen) Vollstaendige 50-900 Skala (Tailwind green) ============================================ */ --color-success-50: #f0fdf4; --color-success-100: #dcfce7; --color-success-200: #bbf7d0; --color-success-300: #86efac; --color-success-400: #4ade80; --color-success-500: #22c55e; --color-success-600: #16a34a; --color-success-700: #15803d; --color-success-800: #166534; --color-success-900: #14532d; /* Status-Default-Alias: zeigt auf -600 (= dunklerer Standardton, gute Lesbarkeit auf hellem Hintergrund). Alle Status-Elemente in OFIRA (Texte, Pills, Buttons, Progressbar-Fills) nutzen exakt diesen Wert. Dark-Variante eine Stufe dunkler fuer Hover/Active. */ --color-success-light: var(--color-success-100); --color-success: var(--color-success-600); --color-success-dark: var(--color-success-700); /* ============================================ FARBEN – WARNING (Amber) Vollstaendige 50-900 Skala (Tailwind amber) WCAG-Hinweis: --color-warning (600) ist fuer Hintergruende/Badges geeignet. Fuer Text auf hellem Grund --color-warning-dark (700+) nutzen. ============================================ */ --color-warning-50: #fffbeb; --color-warning-100: #fef3c7; --color-warning-200: #fde68a; --color-warning-300: #fcd34d; --color-warning-400: #fbbf24; --color-warning-500: #f59e0b; --color-warning-600: #ff9c0d; --color-warning-700: #b45309; --color-warning-800: #92400e; --color-warning-900: #78350f; /* Warning-Default zeigt auf -600 (dunklerer Standardton). Konsistent mit success/danger/info. Dark eine Stufe dunkler fuer Hover/Active. */ --color-warning-light: var(--color-warning-100); --color-warning: var(--color-warning-600); --color-warning-dark: var(--color-warning-700); /* ============================================ FARBEN – DANGER (Rot) Vollstaendige 50-900 Skala (Tailwind red) ============================================ */ --color-danger-50: #fef2f2; --color-danger-100: #fee2e2; --color-danger-200: #fecaca; --color-danger-300: #fca5a5; --color-danger-400: #f87171; --color-danger-500: #ef4444; --color-danger-600: #dc2626; --color-danger-700: #b91c1c; --color-danger-800: #991b1b; --color-danger-900: #7f1d1d; /* Danger-Default zeigt auf -600 (dunklerer Standardton). Konsistent mit success/warning/info. Dark eine Stufe dunkler fuer Hover/Active. */ --color-danger-light: var(--color-danger-100); --color-danger: var(--color-danger-600); --color-danger-dark: var(--color-danger-700); /* ============================================ FARBEN – INFO (Blau/Cyan) Vollstaendige 50-900 Skala (Tailwind sky) ============================================ */ --color-info-50: #f0f9ff; --color-info-100: #e0f2fe; --color-info-200: #bae6fd; --color-info-300: #7dd3fc; --color-info-400: #38bdf8; --color-info-500: #0ea5e9; --color-info-600: #0284c7; --color-info-700: #0369a1; --color-info-800: #075985; --color-info-900: #0c4a6e; /* Info-Default zeigt auf -600 (dunklerer Standardton). Konsistent mit success/warning/danger. Dark eine Stufe dunkler fuer Hover. */ --color-info-light: var(--color-info-100); --color-info: var(--color-info-600); --color-info-dark: var(--color-info-700); /* ============================================ FARBEN – PURPLE (Violett) Vollstaendige 50-900 Skala (Tailwind violet) ============================================ */ --color-purple-50: #f5f3ff; --color-purple-100: #ede9fe; --color-purple-200: #ddd6fe; --color-purple-300: #c4b5fd; --color-purple-400: #a78bfa; --color-purple-500: #8b5cf6; --color-purple-600: #7c3aed; --color-purple-700: #6d28d9; --color-purple-800: #5b21b6; --color-purple-900: #4c1d95; --color-purple-light: var(--color-purple-100); --color-purple: var(--color-purple-600); --color-purple-dark: var(--color-purple-700); /* ============================================ SIDEBAR Navy statt Dunkelgrau – moderner, professioneller B2B-Look ============================================ */ --sidebar-bg: #0f172a; --sidebar-bg-hover: #1e293b; --sidebar-bg-active: #1d4ed8; --sidebar-text: #94a3b8; --sidebar-text-hover: #e2e8f0; --sidebar-text-active: #ffffff; --sidebar-border: rgba(255, 255, 255, 0.06); --sidebar-width: 260px; /* Breite der eingeklappten Navigation (Icon-Rail). */ --sidebar-width-rail: 60px; /* ============================================ LAYOUT ============================================ */ --topbar-height: 72px; --content-max-width: 1400px; --content-padding: 2rem; /* Breite der rechten Beleg-Infoleiste, solange sie als eigene Spalte neben dem Formular steht (unterhalb der Umschaltbreite wird sie zum Overlay und nutzt --drawer-width-sm). */ --doc-aside-width: 320px; /* Senkrechter Rhythmus der Listenzeilen in der Infoleiste (Belegkette, Betragszeilen, Schriftwechsel) und Durchmesser des Statuspunkts der Belegkette. Beide Werte tragen zusaetzlich die Verbindungslinie der Kette, die daraus ihre Laenge und Lage berechnet. */ --doc-aside-row-gap: var(--space-1); --doc-chain-dot: 9px; /* ============================================ TYPOGRAFIE – FONT FAMILIES ============================================ */ --font-family-base: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --font-family-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Courier New', monospace; /* ============================================ TYPOGRAFIE – TYPE SCALE Basis 16px, Faktor ~1.25 (Major Third) ============================================ */ --font-size-2xs: 0.625rem; /* 10px */ --font-size-xs: 0.75rem; /* 12px */ --font-size-sm: 0.875rem; /* 14px */ --font-size-base: 1rem; /* 16px */ --font-size-lg: 1.125rem; /* 18px */ --font-size-xl: 1.25rem; /* 20px */ --font-size-2xl: 1.5rem; /* 24px */ --font-size-3xl: 1.875rem; /* 30px */ --font-size-4xl: 2.25rem; /* 36px */ --font-size-5xl: 3rem; /* 48px */ --font-size-6xl: 3.75rem; /* 60px */ /* ============================================ TYPOGRAFIE – FONT WEIGHTS Linear/Vercel nutzen feinere Abstufungen mit variablen Fonts. 510 wirkt ruhiger als 600, 590 ruhiger als 700 – wesentlich edler. ============================================ */ --font-weight-normal: 400; --font-weight-medium: 510; --font-weight-semibold: 590; --font-weight-bold: 660; /* ============================================ TYPOGRAFIE – LINE HEIGHTS ============================================ */ --line-height-none: 1; --line-height-tight: 1.25; --line-height-snug: 1.375; --line-height-normal: 1.5; --line-height-relaxed: 1.625; --line-height-loose: 2; /* ============================================ TYPOGRAFIE – LETTER SPACING Negatives Tracking auf groesseren Texten erzeugt das "Premium-Feel" von Linear/Vercel. ============================================ */ --tracking-tighter: -0.05em; --tracking-tight: -0.025em; --tracking-normal: 0em; --tracking-wide: 0.025em; --tracking-wider: 0.05em; --tracking-widest: 0.1em; /* High-End-Tracking-Aliasse (Linear/Vercel-Stil) */ --tracking-display: -0.04em; --tracking-heading: -0.02em; --tracking-body: -0.011em; /* ============================================ TYPOGRAFIE – SEMANTISCHE FARBEN ============================================ */ --text-primary: var(--color-neutral-900); --text-secondary: var(--color-neutral-700); --text-tertiary: var(--color-neutral-500); --text-disabled: var(--color-neutral-400); --text-inverse: var(--color-neutral-0); --text-link: var(--color-primary-600); --text-link-hover: var(--color-primary-700); /* Strenge visuelle Konsistenz: Status-Texte verwenden exakt dieselbe -600-Stufe wie die zugehoerigen Indikatoren (Progressbar-Fuellung, Status-Pill-Tint, Buttons). Pro Status existiert nur EIN Farbwert. */ --text-success: var(--color-success-600); --text-warning: var(--color-warning-600); --text-danger: var(--color-danger-600); /* ============================================ TEXT-HIERARCHIE (4-Rollen-Konzept) ============================================ Ziel: pro Text-Funktion EIN Farbwert. Section-Header in jeder Maske, in jeder Liste, in jedem E-Mail haben die identische Heading-Farbe. Form-Labels und Tabellen-Header tragen identisch die Label-Farbe. Beleg-Nummern, Betraege und Body-Inhalte tragen die Body-Farbe. Hinweistexte, Placeholder und sekundaere Beschreibungen die Muted- Farbe. Damit reduzieren wir die visuelle "Grauwert-Buntheit". */ /* Strikte Konsistenz: alle dunklen Texte (Headings UND Body, inkl. Zahlen, Betraege, Beleg-Nummern) nutzen exakt dieselbe Stufe – neutral-800 (#1e293b). Headings unterscheiden sich rein typografisch (Gewicht, Tracking, Uppercase), nicht durch eine zweite Schwarzstufe. */ --text-heading: var(--color-neutral-800); /* Section-Header, h1-h6 */ --text-body: var(--color-neutral-800); /* Daten-Werte, Betraege, Beleg-Nummern */ --text-label: var(--color-neutral-600); /* Form-Labels, Tabellen-Header, Caption */ --text-muted: var(--color-neutral-500); /* Hinweise, Placeholder, "(erscheinen nicht im Ausdruck)" */ /* Rueckwaerts-kompatible Aliase – bestehender Code (text-primary, text-secondary, text-tertiary) zeigt jetzt automatisch auf die neuen Rollen, ohne Markup-Aenderungen. */ --text-primary: var(--text-body); --text-secondary: var(--text-label); --text-tertiary: var(--text-muted); /* ============================================ STATUS-INDIKATOR-TOKENS ============================================ Explizit deklariert, dass Indikatoren (Progressbars, Bars, Status- Punkte) die SELBE Stufe nutzen wie Status-Texte und Pill-Texte: -600. Damit ist die Indikator-Stufe deklariert dokumentiert. */ --indicator-success: var(--color-success-600); --indicator-warning: var(--color-warning-600); --indicator-danger: var(--color-danger-600); --indicator-info: var(--color-info-600); --indicator-primary: var(--color-primary-600); --indicator-neutral: var(--color-neutral-500); /* ============================================ TYPOGRAFIE – LESBARE TEXTBREITEN ============================================ */ --prose-width-narrow: 45ch; --prose-width-normal: 65ch; --prose-width-wide: 80ch; /* ============================================ TYPOGRAFIE – ABSTÄNDE ============================================ */ --paragraph-spacing: 1em; /* ============================================ SPACING SCALE Konsequent 4px-Raster ============================================ */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-7: 1.75rem; /* 28px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ /* ============================================ BORDER RADIUS ============================================ */ --radius-sm: 0.25rem; /* 4px */ --radius-md: 0.5rem; /* 8px */ --radius-lg: 0.75rem; /* 12px */ --radius-xl: 1rem; /* 16px */ --radius-2xl: 1.5rem; /* 24px */ --radius-full: 9999px; /* ============================================ SCHATTEN Subtil und realistisch ============================================ */ --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.04); --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.04); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.04); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.04); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.08), 0 8px 10px -6px rgb(0 0 0 / 0.03); /* ============================================ TRANSITIONS ============================================ */ --transition-fast: 150ms ease; --transition-normal: 250ms ease; --transition-slow: 350ms ease; /* ============================================ Z-INDEX SKALA ============================================ */ --z-base: 1; --z-raised: 10; --z-topbar: 50; --z-sidebar: 100; --z-modal: 200; /* Toasts/Bestätigungs-Overlays müssen über dem fixierten Header/der Topbar und den Tooltips liegen, die im Layout rohe z-index-Werte bis 10000 verwenden — sonst erscheinen sie hinter dem Header. Daher bewusst oberhalb davon. */ --z-toast: 10060; --z-tooltip: 400; /* ============================================ FOCUS RING – Accessibility ============================================ */ --focus-ring: 0 0 0 3px var(--color-primary-100); --focus-ring-offset: 2px; /* ============================================ OVERLAY ============================================ */ --overlay-bg: rgba(0, 0, 0, 0.5); /* ============================================ BILDLAUFLEISTE Duenn, Griff aus --border-strong, Spur transparent. Dauerhaft dunkle Flaechen (Navigation) setzen eigene Werte, sonst waere der Griff dort unsichtbar. ============================================ */ --scrollbar-thumb: var(--border-strong); --scrollbar-thumb-hover: rgba(15, 23, 42, 0.32); /* ============================================ SKELETON LOADING ============================================ */ --skeleton-base: var(--color-neutral-200); --skeleton-shine: var(--color-neutral-100); /* ============================================ FORMULAR-SYSTEM Einheitliche Tokens fuer alle Eingabefelder, Labels, Sektionen und Validierung ============================================ */ --form-border: var(--color-neutral-400); --form-border-hover: var(--color-neutral-500); --form-border-focus: var(--color-primary-500); --form-bg: var(--color-neutral-0); --form-bg-readonly: var(--color-neutral-50); --form-bg-disabled: var(--color-neutral-100); --form-radius: var(--radius-md); /* Bootstrap: --bs-border-radius an Form-Design-Token */ --bs-border-radius: var(--form-radius); --bs-border-radius-sm: var(--radius-sm); --bs-border-radius-lg: var(--radius-lg); --form-padding-x: var(--space-3); --form-padding-y: calc(var(--space-2) * var(--density-y, 1)); --form-height: calc(2.5rem * var(--density-y, 1)); --form-font-size: var(--font-size-sm); --form-placeholder: var(--color-neutral-400); --form-label-color: var(--text-secondary); --form-label-size: var(--font-size-sm); --form-label-weight: var(--font-weight-medium); --form-helper-color: var(--text-tertiary); --form-section-border: var(--color-neutral-200); /* Pflichtfeld-Live-Validierung — nur semantische Tokens, keine losen Hex-Farben */ --form-required-valid-border: var(--color-success); --form-required-invalid-border: var(--color-danger); --form-required-invalid-ring: var(--color-danger-light); /* Chevron der Auswahlfelder. Liegt als Hintergrundbild auf dem Feld selbst und ist damit unabhaengig von Beschriftungen im Umschlag immer mittig. Die Strichfarbe steht im Datenverweis und kann dort nicht auf Tokens verweisen; sie entspricht --text-tertiary bzw. --form-border-focus. */ --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 6 5 5 5-5'/%3E%3C/svg%3E"); --select-chevron-focus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2322c55e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 6 5 5 5-5'/%3E%3C/svg%3E"); /* ============================================ BREADCRUMB ============================================ */ --breadcrumb-color: var(--text-tertiary); --breadcrumb-link-color: var(--text-link); --breadcrumb-link-hover: var(--text-link-hover); --breadcrumb-separator: var(--color-neutral-300); --breadcrumb-font-size: var(--font-size-xs); /* ============================================ SURFACE-TOKENS (Semantic Layer) Hintergruende fuer UI-Ebenen. Im Light-Mode mappen sie auf Neutrals, im Dark-Mode werden sie umgemappt. ============================================ */ --surface-page: var(--color-neutral-50); --surface-card: var(--color-neutral-0); --surface-card-hover: var(--color-neutral-50); --surface-elevated: var(--color-neutral-0); --surface-sunken: var(--color-neutral-100); --surface-overlay: var(--color-neutral-0); --surface-tooltip: var(--color-neutral-800); --surface-disabled: var(--color-neutral-100); /* ============================================ BORDER-TOKENS (Semantic Layer) Rahmenfarben fuer verschiedene Kontexte. rgba statt feste Hex – Borders strukturieren, ohne visuelles Gewicht zu addieren (Vercel/Linear). ============================================ */ --border-subtle: rgba(15, 23, 42, 0.06); --border-default: rgba(15, 23, 42, 0.10); --border-strong: rgba(15, 23, 42, 0.18); --border-focus: var(--color-primary-500); --border-danger: var(--color-danger-500); --border-success: var(--color-success-500); /* ============================================ TEXT-ON-COLOR TOKENS Kontrastfarben fuer Text auf farbigen Hintergruenden. Ersetzt hartkodiertes white. ============================================ */ --text-on-primary: var(--color-neutral-0); --text-on-success: var(--color-neutral-0); --text-on-danger: var(--color-neutral-0); --text-on-warning: var(--color-neutral-900); --text-on-info: var(--color-neutral-0); --text-on-purple: var(--color-neutral-0); /* Bedienflaechen AUF farbigen Baendern (Belegkopf, Topbar): eine translucente weisse Flaeche traegt in jedem Theme, weil das Band selbst farbig bleibt. Ein dunkler Schleier wie --icon-btn-bg-hover verpufft dort (gemessen 1,08:1 auf #15803d); 10 % kommen auf 1,20:1, 20 % auf 1,43:1. */ --on-accent-surface: rgba(255, 255, 255, 0.10); --on-accent-surface-hover: rgba(255, 255, 255, 0.20); /* ============================================ MOTION-TOKENS (Vollstaendig) Duration + Easing separat definiert, damit sie frei kombinierbar sind. ============================================ */ --duration-instant: 0ms; --duration-fast: 100ms; --duration-base: 200ms; --duration-slow: 300ms; --duration-slower: 500ms; --ease-linear: linear; --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* ============================================ OPACITY-SKALA ============================================ */ --opacity-0: 0; --opacity-5: 0.05; --opacity-10: 0.1; --opacity-20: 0.2; --opacity-40: 0.4; --opacity-60: 0.6; --opacity-80: 0.8; --opacity-100: 1; /* ============================================ SPACING SCALE – ERGAENZUNGEN Fehlende Stufen im 4px-Raster ============================================ */ --space-9: 2.25rem; /* 36px */ --space-11: 2.75rem; /* 44px – Touch-Target-Minimum */ --space-14: 3.5rem; /* 56px */ --space-24: 6rem; /* 96px */ /* ============================================ SPACING – SEMANTISCHE ALIASE Inset = allseitiges Padding (innerhalb) Stack = vertikaler Abstand (Elemente uebereinander) Inline = horizontaler Abstand (Elemente nebeneinander) ============================================ */ --inset-xs: var(--space-1); --inset-sm: var(--space-2); --inset-md: var(--space-4); --inset-lg: var(--space-6); --inset-xl: var(--space-8); --stack-xs: var(--space-1); --stack-sm: var(--space-2); --stack-md: var(--space-4); --stack-lg: var(--space-6); --stack-xl: var(--space-8); --inline-xs: var(--space-1); --inline-sm: var(--space-2); --inline-md: var(--space-3); --inline-lg: var(--space-4); --inline-xl: var(--space-6); /* ============================================ ICON-TOKENS Einheitliche Icon-Groessen ============================================ */ --icon-xs: 0.875rem; /* 14px */ --icon-sm: 1rem; /* 16px */ --icon-md: 1.25rem; /* 20px */ --icon-lg: 1.5rem; /* 24px */ --icon-xl: 2rem; /* 32px */ /* ============================================ CONTAINER-TOKENS Max-Widths fuer verschiedene Layouts ============================================ */ --container-xs: 20rem; /* 320px */ --container-sm: 24rem; /* 384px */ --container-md: 28rem; /* 448px */ --container-lg: 32rem; /* 512px */ --container-xl: 36rem; /* 576px */ --container-2xl: 42rem; /* 672px */ --container-full: 87.5rem; /* 1400px = --content-max-width */ --container-prose: 65ch; /* ============================================ BREAKPOINT-TOKENS Referenzwerte (nicht direkt in CSS nutzbar, aber als Dokumentation und fuer JS). Media Queries verwenden diese Werte direkt. ============================================ */ --bp-sm: 576px; --bp-md: 768px; --bp-lg: 992px; --bp-xl: 1200px; --bp-2xl: 1400px; /* ============================================ Z-INDEX SKALA – ERWEITERT Kompatibel mit Bootstrap-Defaults (1000+) ============================================ */ --z-dropdown: 1000; --z-sticky: 1020; --z-fixed: 1030; --z-modal-backdrop: 1040; --z-modal-content: 1050; --z-popover: 1070; --z-tooltip-bs: 1080; /* ============================================ TYPOGRAFIE – SEMANTISCHE ALIASE Buendel aus Size + Weight + LineHeight + Tracking. Genutzt als Referenz; einzelne Properties werden in typography.css als Klassen umgesetzt. ============================================ */ /* Display (Hero-Headlines) */ --text-display-lg-size: var(--font-size-5xl); --text-display-lg-weight: var(--font-weight-bold); --text-display-lg-lh: var(--line-height-tight); --text-display-lg-tracking: var(--tracking-tighter); --text-display-md-size: var(--font-size-4xl); --text-display-md-weight: var(--font-weight-semibold); --text-display-md-lh: var(--line-height-tight); --text-display-md-tracking: var(--tracking-tight); --text-display-sm-size: var(--font-size-3xl); --text-display-sm-weight: var(--font-weight-semibold); --text-display-sm-lh: var(--line-height-snug); --text-display-sm-tracking: var(--tracking-tight); /* Headings */ --text-heading-1-size: var(--font-size-2xl); --text-heading-1-weight: var(--font-weight-semibold); --text-heading-1-lh: var(--line-height-snug); --text-heading-2-size: var(--font-size-xl); --text-heading-2-weight: var(--font-weight-semibold); --text-heading-2-lh: var(--line-height-snug); --text-heading-3-size: var(--font-size-lg); --text-heading-3-weight: var(--font-weight-semibold); --text-heading-3-lh: var(--line-height-normal); --text-heading-4-size: var(--font-size-base); --text-heading-4-weight: var(--font-weight-semibold); --text-heading-4-lh: var(--line-height-normal); /* Body */ --text-body-lg-size: var(--font-size-base); --text-body-lg-weight: var(--font-weight-normal); --text-body-lg-lh: var(--line-height-relaxed); --text-body-md-size: var(--font-size-sm); --text-body-md-weight: var(--font-weight-normal); --text-body-md-lh: var(--line-height-normal); --text-body-sm-size: var(--font-size-xs); --text-body-sm-weight: var(--font-weight-normal); --text-body-sm-lh: var(--line-height-normal); /* Label / Caption / Overline */ --text-label-size: var(--font-size-sm); --text-label-weight: var(--font-weight-medium); --text-label-lh: var(--line-height-none); --text-caption-size: var(--font-size-xs); --text-caption-weight: var(--font-weight-normal); --text-caption-lh: var(--line-height-normal); --text-overline-size: var(--font-size-xs); --text-overline-weight: var(--font-weight-semibold); --text-overline-lh: var(--line-height-none); --text-overline-tracking: var(--tracking-widest); /* ============================================ KOMPONENTEN-TOKENS – BUTTONS ============================================ */ --btn-height-sm: 2rem; --btn-height-md: 2.5rem; --btn-height-lg: 3rem; --btn-padding-x-sm: var(--space-3); --btn-padding-x-md: var(--space-4); --btn-padding-x-lg: var(--space-6); --btn-font-size-sm: var(--font-size-xs); --btn-font-size-md: var(--font-size-sm); --btn-font-size-lg: var(--font-size-base); --btn-radius: var(--radius-md); --btn-gap: var(--space-2); /* ============================================ KOMPONENTEN-TOKENS – CARDS ============================================ */ --card-padding-sm: var(--space-3); --card-padding-md: var(--space-5); --card-padding-lg: var(--space-7); --card-radius: var(--radius-lg); --card-border: 1px solid var(--border-subtle); /* Karten, deren Flaeche selbst gefuellt ist (Belegkarte, Interne Informationen): der 6%-Umriss liegt innen an --surface-sunken und ist davon kaum zu unterscheiden (Helligkeitsunterschied 3 von 255). Deshalb ein eigener, kraeftigerer Umriss — und zwar DECKEND: halbtransparente Raender mischen sich mit der Flaeche, auf der sie liegen, sodass zwei Karten mit unterschiedlicher Fuellung sonst unterschiedliche Toene zeigen (weisse Karte rgb(231,232,234), gefuellte rgb(218,223,228)). */ --card-border-strong: 1px solid var(--color-neutral-200); --card-shadow-default: var(--shadow-sm); --card-shadow-hover: var(--shadow-md); /* ============================================ KOMPONENTEN-TOKENS – MODALS ============================================ */ --modal-padding: var(--space-6); --modal-radius: var(--radius-xl); --modal-width-sm: 24rem; /* 384px */ --modal-width-md: 32rem; /* 512px */ --modal-width-lg: 42rem; /* 672px */ --modal-width-xl: 56rem; /* 896px */ --modal-shadow: var(--shadow-xl); /* ============================================ KOMPONENTEN-TOKENS – TOASTS ============================================ */ --toast-width: 22rem; /* 352px */ --toast-padding: var(--space-4); --toast-radius: var(--radius-lg); --toast-shadow: var(--shadow-lg); /* ============================================ KOMPONENTEN-TOKENS – BADGES ============================================ */ --badge-padding-x: var(--space-2); --badge-padding-y: var(--space-1); --badge-font-size: var(--font-size-xs); --badge-radius: var(--radius-full); /* ============================================ KOMPONENTEN-TOKENS – TABS ============================================ */ --tab-padding-x: var(--space-4); --tab-padding-y: var(--space-2); --tab-border-width: 2px; /* ============================================ KOMPONENTEN-TOKENS – TABLES Linear/Stripe-Stil: keine Header-Faerbung, Borders nur horizontal und sehr subtil. ============================================ */ --table-row-height: 2.75rem; --table-cell-padding-x: var(--space-3); --table-cell-padding-y: calc(var(--space-3) * var(--density-y)); --table-header-bg: transparent; --table-header-color: var(--text-tertiary); --table-header-size: 11px; --table-header-letter-spacing: 0.04em; --table-row-hover-bg: rgba(15, 23, 42, 0.025); /* Zeilentrenner: etwas sichtbarer als --border-subtle (Listen/Scanbarkeit). */ --table-divider-color: rgba(15, 23, 42, 0.1); --table-border: 1px solid var(--table-divider-color); --table-border-strong: 1px solid rgba(15, 23, 42, 0.12); /* ============================================ KOMPONENTEN-TOKENS – INPUTS (Ergaenzend) ============================================ */ --input-height-sm: 2rem; --input-height-md: var(--form-height); --input-height-lg: 3rem; /* ============================================ KOMPONENTEN-TOKENS – DRAWER ============================================ */ --drawer-width-sm: 24rem; /* 384px */ --drawer-width-md: 32rem; /* 512px */ --drawer-width-lg: 42rem; /* 672px */ --drawer-shadow: var(--shadow-xl); /* ============================================ STATUS-PILL-TOKENS (v2) Subtile Tinted-Backgrounds via color-mix. Pille = ~12 % Tint des Statusfarbtons + dunkler Text. Funktioniert in Light & Dark Mode automatisch. ============================================ */ --pill-padding-x: var(--space-2); --pill-padding-y: 2px; --pill-radius: var(--radius-sm); --pill-font-size: var(--font-size-2xs); --pill-font-weight: var(--font-weight-medium); --pill-tint-amount: 12%; /* Status-Pills: Text-Farbe identisch zur Indikator-Farb-Stufe (-600). Damit haben Pill-Label, Progressbar-Fuellung und Status-Text exakt denselben Farbwert pro Status. */ --pill-bg-success: color-mix(in srgb, var(--color-success-600) var(--pill-tint-amount), transparent); --pill-text-success: var(--color-success-600); --pill-bg-warning: color-mix(in srgb, var(--color-warning-600) var(--pill-tint-amount), transparent); --pill-text-warning: var(--color-warning-600); --pill-bg-danger: color-mix(in srgb, var(--color-danger-600) var(--pill-tint-amount), transparent); --pill-text-danger: var(--color-danger-600); --pill-bg-info: color-mix(in srgb, var(--color-info-600) var(--pill-tint-amount), transparent); --pill-text-info: var(--color-info-600); --pill-bg-neutral: rgba(15, 23, 42, 0.06); --pill-text-neutral: var(--color-neutral-700); --pill-bg-primary: color-mix(in srgb, var(--color-primary-600) var(--pill-tint-amount), transparent); --pill-text-primary: var(--color-primary-600); --pill-bg-purple: color-mix(in srgb, var(--color-purple-600) var(--pill-tint-amount), transparent); --pill-text-purple: var(--color-purple-600); /* ============================================ ICON-BUTTON-TOKENS WCAG 2.5.8: Touch-Target >= 24x24 CSS-px. Wir gehen auf 32x32 (sicher >= 24). ============================================ */ --icon-btn-size: 2rem; /* 32px */ --icon-btn-radius: var(--radius-md); --icon-btn-icon-size: var(--icon-md); --icon-btn-bg-hover: rgba(15, 23, 42, 0.06); --icon-btn-bg-active: rgba(15, 23, 42, 0.10); --icon-btn-color: var(--text-tertiary); --icon-btn-color-hover: var(--text-secondary); /* ============================================ TOUCH-TARGETS (WCAG 2.2 / 2.5.8) ============================================ */ --touch-target-min: 1.5rem; /* 24px – WCAG-Minimum */ --touch-target-rec: 2.75rem; /* 44px – iOS-Empfehlung */ /* ============================================ FOCUS-RING (WCAG 2.4.13 Focus Appearance) 2 px Outline + 2 px Offset garantiert sowohl den Perimeter als auch >= 3:1 Kontrast. ============================================ */ --focus-outline-width: 2px; --focus-outline-offset: 2px; --focus-outline-color: var(--color-primary-500); /* ============================================ DENSITY (Compact / Comfortable) Multiplikator fuer vertikales Padding in Tabellen/Forms. 1.0 = Comfortable, 0.75 = Compact. Wird via [data-density="compact"] umgeschaltet. ============================================ */ --density-y: 1; /* ============================================ EASINGS – ZUSAETZLICH (Material Emphasis) ============================================ */ --ease-emphasis: cubic-bezier(0.2, 0, 0, 1); /* ============================================ BRAND-AKZENT (Light- vs Dark-Auspraegung) Wird NUR fuer den Akzent selbst genutzt (Active-State, primaerer Button, Link-Hover). ============================================ */ --accent-on-light: var(--color-primary-600); --accent-on-dark: var(--color-primary-500); } /* Compact Density-Mode */ :root[data-density="compact"] { --density-y: 0.75; } /* ============================================================ DARK MODE Aktiviert via data-theme="dark" auf oder automatisch via prefers-color-scheme: dark. Die Farbskalen (primary-50..900 etc.) bleiben identisch. Nur semantische Tokens werden umgemappt. AUSNAHME: Das Template Studio ist ausgenommen – dort bleibt immer der Light-Modus aktiv. ============================================================ */ [data-theme="dark"] { /* --- SURFACES (Material/Tailwind-Standard) --- Page = #0F172A (Slate-900), Card = #1E293B (Slate-800), Elevated = #334155 (Slate-700). Elevation via Lightness, nicht via Schatten – wie Linear/Vercel. */ --surface-page: #0F172A; --surface-card: #1E293B; --surface-card-hover: #243044; --surface-elevated: #334155; --surface-sunken: #0B1120; --surface-overlay: #1E293B; --surface-tooltip: var(--color-neutral-100); --surface-disabled: #1E293B; /* --- BORDERS (rgba weiss, nicht Hex) --- */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.10); --border-strong: rgba(255, 255, 255, 0.18); --border-focus: var(--color-primary-400); /* Bildlaufleiste: der Griff folgt --border-strong und ist damit schon hell; nur der Hover-Wert braucht die helle Variante. */ --scrollbar-thumb-hover: rgba(255, 255, 255, 0.32); /* Chevron im Dunkelmodus: heller Strich, damit er auf dunklem Feld sichtbar bleibt. */ --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-opacity='0.5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 6 5 5 5-5'/%3E%3C/svg%3E"); /* --- TEXT (Material-Style White-Opacities) --- 87 % = high emphasis (Titel/Body), 60 % = medium (secondary), 38 % = disabled. */ /* Text-Hierarchie (4 semantische Rollen) im Dark-Mode */ --text-heading: rgba(255, 255, 255, 0.92); --text-body: rgba(255, 255, 255, 0.92); --text-label: rgba(255, 255, 255, 0.68); --text-muted: rgba(255, 255, 255, 0.50); /* Rueckwaerts-kompatible Aliase – zeigen auf die neuen Rollen */ --text-primary: var(--text-body); --text-secondary: var(--text-label); --text-tertiary: var(--text-muted); --text-disabled: rgba(255, 255, 255, 0.38); --text-inverse: var(--color-neutral-900); --text-link: var(--color-primary-300); --text-link-hover: var(--color-primary-200); /* Dark-Mode: Status-Texte auf derselben -600-Stufe wie die Indikatoren, damit die strenge Farb-Konsistenz auch im dunklen Theme greift. Navigation/Link nutzt weiterhin eine eigene Stufe (siehe oben). */ --text-success: var(--color-success-600); --text-warning: var(--color-warning-600); --text-danger: var(--color-danger-600); /* Status-Indikator-Tokens (Dark) – identisch zur Light-Stufe */ --indicator-success: var(--color-success-600); --indicator-warning: var(--color-warning-600); --indicator-danger: var(--color-danger-600); --indicator-info: var(--color-info-600); --indicator-primary: var(--color-primary-600); --indicator-neutral: var(--color-neutral-400); /* --- BRAND-AKZENT (entsaettigt + heller fuer Dark) --- Vermeidet das "Neon"-Vibrieren auf dunklen Surfaces. */ --accent-on-dark: var(--color-primary-400); /* --- STATUS-PILLS (Dark-Variante) --- Tint-Flaeche etwas staerker (16 %), Text auf derselben -600-Stufe wie im Light-Mode – strikte Konsistenz ueber alle Themes. */ --pill-tint-amount: 16%; --pill-text-success: var(--color-success-600); --pill-text-warning: var(--color-warning-600); --pill-text-danger: var(--color-danger-600); --pill-text-info: var(--color-info-600); --pill-text-neutral: rgba(255, 255, 255, 0.70); --pill-text-primary: var(--color-primary-600); --pill-bg-neutral: rgba(255, 255, 255, 0.07); /* --- ICON-BUTTON --- */ --icon-btn-bg-hover: rgba(255, 255, 255, 0.07); --icon-btn-bg-active: rgba(255, 255, 255, 0.12); /* --- FOCUS-OUTLINE --- */ --focus-outline-color: var(--color-primary-300); /* --- SCHATTEN (staerker im Dark Mode) --- */ --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.30); --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.40), 0 1px 2px -1px rgb(0 0 0 / 0.30); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.45), 0 2px 4px -2px rgb(0 0 0 / 0.30); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.50), 0 4px 6px -4px rgb(0 0 0 / 0.30); --shadow-xl: 0 20px 40px -5px rgb(0 0 0 / 0.60), 0 8px 12px -6px rgb(0 0 0 / 0.35); /* --- OVERLAY --- */ --overlay-bg: rgba(0, 0, 0, 0.70); /* --- SKELETON --- */ --skeleton-base: rgba(255, 255, 255, 0.06); --skeleton-shine: rgba(255, 255, 255, 0.12); /* --- FOCUS RING (Box-Shadow-Variante, weicher) --- */ --focus-ring: 0 0 0 3px rgba(147, 197, 253, 0.30); /* --- FORMULAR --- */ --form-border: rgba(255, 255, 255, 0.12); --form-border-hover: rgba(255, 255, 255, 0.20); --form-border-focus: var(--color-primary-400); --form-bg: #1E293B; --form-bg-readonly: #0B1120; --form-bg-disabled: #18222F; --form-placeholder: rgba(255, 255, 255, 0.35); --form-label-color: var(--text-secondary); --form-helper-color: var(--text-tertiary); --form-section-border: rgba(255, 255, 255, 0.06); /* --- TABLE --- */ --table-header-bg: transparent; --table-row-hover-bg: rgba(255, 255, 255, 0.03); --table-divider-color: rgba(255, 255, 255, 0.075); --table-border: 1px solid var(--table-divider-color); --table-border-strong: 1px solid rgba(255, 255, 255, 0.095); /* --- CARD --- */ --card-border: 1px solid rgba(255, 255, 255, 0.06); /* Deckend, damit gefuellte Karten denselben Ton zeigen (siehe Hellmodus). */ --card-border-strong: 1px solid var(--color-neutral-700); --card-shadow-default: 0 1px 3px 0 rgb(0 0 0 / 0.40); --card-shadow-hover: 0 6px 14px 0 rgb(0 0 0 / 0.45); /* --- SIDEBAR (bleibt dunkel, nur Akzente anpassen) --- */ --sidebar-bg: #0B1120; --sidebar-bg-hover: rgba(255, 255, 255, 0.04); --sidebar-border: rgba(255, 255, 255, 0.04); /* --- BREADCRUMB --- */ --breadcrumb-separator: rgba(255, 255, 255, 0.20); } /* Auto-Detection: System-Präferenz Dark */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --surface-page: #0F172A; --surface-card: #1E293B; --surface-card-hover: #243044; --surface-elevated: #334155; --surface-sunken: #0B1120; --surface-overlay: #1E293B; --surface-tooltip: var(--color-neutral-100); --surface-disabled: #1E293B; --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.10); --border-strong: rgba(255, 255, 255, 0.18); --border-focus: var(--color-primary-400); /* Text-Hierarchie (4 semantische Rollen) im Auto-Dark */ --text-heading: rgba(255, 255, 255, 0.92); --text-body: rgba(255, 255, 255, 0.92); --text-label: rgba(255, 255, 255, 0.68); --text-muted: rgba(255, 255, 255, 0.50); --text-primary: var(--text-body); --text-secondary: var(--text-label); --text-tertiary: var(--text-muted); /* Chevron im Dunkelmodus: heller Strich, damit er auf dunklem Feld sichtbar bleibt. */ --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-opacity='0.5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 6 5 5 5-5'/%3E%3C/svg%3E"); --text-disabled: rgba(255, 255, 255, 0.38); --text-inverse: var(--color-neutral-900); --text-link: var(--color-primary-300); --text-link-hover: var(--color-primary-200); /* Dark-Mode: strikte Konsistenz – Status-Texte und Pill-Labels nutzen dieselbe -600-Stufe wie die Indikatoren. */ --text-success: var(--color-success-600); --text-warning: var(--color-warning-600); --text-danger: var(--color-danger-600); --indicator-success: var(--color-success-600); --indicator-warning: var(--color-warning-600); --indicator-danger: var(--color-danger-600); --indicator-info: var(--color-info-600); --indicator-primary: var(--color-primary-600); --indicator-neutral: var(--color-neutral-400); --accent-on-dark: var(--color-primary-400); --pill-tint-amount: 16%; --pill-text-success: var(--color-success-600); --pill-text-warning: var(--color-warning-600); --pill-text-danger: var(--color-danger-600); --pill-text-info: var(--color-info-600); --pill-text-neutral: rgba(255, 255, 255, 0.70); --pill-text-primary: var(--color-primary-600); --pill-bg-neutral: rgba(255, 255, 255, 0.07); --icon-btn-bg-hover: rgba(255, 255, 255, 0.07); --icon-btn-bg-active: rgba(255, 255, 255, 0.12); --focus-outline-color: var(--color-primary-300); --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.30); --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.40), 0 1px 2px -1px rgb(0 0 0 / 0.30); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.45), 0 2px 4px -2px rgb(0 0 0 / 0.30); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.50), 0 4px 6px -4px rgb(0 0 0 / 0.30); --shadow-xl: 0 20px 40px -5px rgb(0 0 0 / 0.60), 0 8px 12px -6px rgb(0 0 0 / 0.35); --overlay-bg: rgba(0, 0, 0, 0.70); --skeleton-base: rgba(255, 255, 255, 0.06); --skeleton-shine: rgba(255, 255, 255, 0.12); --focus-ring: 0 0 0 3px rgba(147, 197, 253, 0.30); --form-border: rgba(255, 255, 255, 0.12); --form-border-hover: rgba(255, 255, 255, 0.20); --form-border-focus: var(--color-primary-400); --form-bg: #1E293B; --form-bg-readonly: #0B1120; --form-bg-disabled: #18222F; --form-placeholder: rgba(255, 255, 255, 0.35); --form-label-color: var(--text-secondary); --form-helper-color: var(--text-tertiary); --form-section-border: rgba(255, 255, 255, 0.06); --table-header-bg: transparent; --table-row-hover-bg: rgba(255, 255, 255, 0.03); --table-divider-color: rgba(255, 255, 255, 0.075); --table-border: 1px solid var(--table-divider-color); --table-border-strong: 1px solid rgba(255, 255, 255, 0.095); --card-border: 1px solid rgba(255, 255, 255, 0.06); --card-border-strong: 1px solid var(--color-neutral-700); --card-shadow-default: 0 1px 3px 0 rgb(0 0 0 / 0.40); --card-shadow-hover: 0 6px 14px 0 rgb(0 0 0 / 0.45); --sidebar-bg: #0B1120; --sidebar-bg-hover: rgba(255, 255, 255, 0.04); --sidebar-border: rgba(255, 255, 255, 0.04); --breadcrumb-separator: rgba(255, 255, 255, 0.20); } } /* ============================================================ REDUCED MOTION Respektiert Nutzer-Einstellungen fuer weniger Bewegung ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }