/* ============================================================ 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; /* ============================================ LAYOUT ============================================ */ --topbar-height: 60px; --content-max-width: 1400px; --content-padding: 2rem; /* ============================================ 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; --z-toast: 300; --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); /* ============================================ 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); /* ============================================ 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); /* ============================================ 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); --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); /* ============================================ 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); /* --- 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); --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); --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-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; } }