/* ============================================================================ Tappr Design Tokens Single Source of Truth: /DESIGN_PRINCIPLES.md Version: 1.0 · April 2026 Alle Custom Properties dieses Files sind verbindlich. Komponenten referenzieren ausschliesslich diese Tokens — keine hardcoded Hex-Werte, keine hardcoded Pixel-Spacings ausserhalb von Icon-Grössen und Mikro-Werten. ========================================================================= */ :root { /* ─── Backgrounds (warm neutral) ──────────────────────────────────────── */ --bg: #f7f6f2; --bg-2: #ffffff; --bg-3: #efede7; --bg-warm: #efeae0; /* Sidebar (Backoffice + Super-Admin) — dunkle, kühle Fläche */ --sidebar-bg: #17171f; --sidebar-text: #e8e8e4; --sidebar-text-mute: #7a7a78; --sidebar-rule: rgba(255, 255, 255, 0.06); --sidebar-hover: rgba(255, 255, 255, 0.05); --sidebar-chip: rgba(255, 255, 255, 0.08); /* ─── Text (Ink + Mute) ──────────────────────────────────────────────── */ --ink: #17171f; --ink-2: #2c2c36; --mute: #6a6a70; --mute-2: #9d9da2; /* ─── Rules + Dividers ───────────────────────────────────────────────── */ --rule: #e4e2dc; --rule-2: #d6d4cc; /* ─── Brand (Coral) ──────────────────────────────────────────────────── */ --coral: #ff4d4d; --coral-2: #e63a3a; --coral-soft: #ffe5e5; /* ─── Status ─────────────────────────────────────────────────────────── */ --green: #16a34a; --green-soft: #dcfce7; --amber: #f59e0b; --amber-soft: #fef3c7; --red: #dc2626; --red-soft: #fee2e2; --blue: #0070e0; --blue-soft: #e6f1fb; /* ─── Overlay / Shadow ───────────────────────────────────────────────── */ --overlay: rgba(23, 23, 31, 0.55); --shadow-modal: 0 24px 60px -20px rgba(23, 23, 31, 0.35); --shadow-card: 0 1px 2px rgba(23, 23, 31, 0.04); --shadow-lift: 0 6px 18px -8px rgba(23, 23, 31, 0.18); /* ─── Theme-aware Surfaces (für Dark-Mode-Kompatibilität) ───────────── */ --topbar-bg: rgba(247, 246, 242, 0.85); --topbar-icon: #374151; --topbar-icon-hover: #17171f; --row-zebra: rgba(23, 23, 31, 0.02); /* Auf --ink-Flächen (imp-banner, bulk-bar) genutzt — flippt mit dem Theme, * damit Borders/Hovers auch im Dark-Mode (wo --ink hell wird) sichtbar * bleiben. */ --on-ink: #ffffff; --on-ink-border-soft: rgba(255, 255, 255, 0.2); --on-ink-border: rgba(255, 255, 255, 0.4); --on-ink-tint: rgba(255, 255, 255, 0.08); /* Generischer Hover-Tint, funktioniert auf hellen Backgrounds */ --hover-tint: rgba(0, 0, 0, 0.05); /* ─── Focus-Ring ─────────────────────────────────────────────────────── */ --focus-ring: 0 0 0 2px var(--coral); --focus-ring-offset: 2px; /* ─── Spacing (8pt-Grid) ─────────────────────────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-28: 112px; /* ─── Radius ─────────────────────────────────────────────────────────── */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px; --radius-xl: 14px; --radius-2xl: 18px; --radius-full: 100px; /* ─── Typografie — Familien ──────────────────────────────────────────── */ --font-sans: 'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace; /* Fraunces wird erst in Phase 5 (Landing) eingebunden. Nicht im Backoffice. */ --font-serif: 'Fraunces', Georgia, serif; /* ─── Typografie — Rollen Backoffice (§3) ────────────────────────────── */ /* Page Title */ --fs-page: 28px; --lh-page: 1.2; --ls-page: -0.02em; /* Section Title */ --fs-section: 20px; --lh-section: 1.3; --ls-section: -0.015em; /* Stat Value */ --fs-stat: 32px; --lh-stat: 1; --ls-stat: -0.025em; /* Stat Label / Eyebrow / Table Header */ --fs-eyebrow: 11px; --lh-eyebrow: 1.4; --ls-eyebrow: 0.08em; /* Body */ --fs-body: 14px; --lh-body: 1.55; --fs-body-sm: 13px; --lh-body-sm: 1.5; /* Table Cell */ --fs-table: 13px; --lh-table: 1.4; /* Mono */ --fs-mono: 13px; --lh-mono: 1.4; /* ─── Layout ─────────────────────────────────────────────────────────── */ --sidebar-w: 240px; --topbar-h: 60px; --content-max: 1280px; --content-pad: 32px; /* ─── Motion ─────────────────────────────────────────────────────────── */ --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1); --dur-micro: 160ms; --dur-state: 240ms; --dur-modal: 280ms; --dur-reveal: 700ms; /* ─── Breakpoints (nur als Referenz — media queries nutzen Werte) ────── */ --bp-tablet: 1024px; --bp-mobile: 640px; /* ─── Z-Index-Leiter ─────────────────────────────────────────────────── */ --z-topbar: 10; --z-sidebar: 20; --z-modal: 50; --z-toast: 60; --z-max: 100; } /* ============================================================================ Dark-Theme-Override Aktiviert via (gesetzt vom FOUC-Snippet aus dem tappr_theme-Cookie, oder vom Theme-Toggle-Button im Topbar). Sidebar bleibt per Spec in beiden Themes dunkel — die --sidebar-* Tokens werden hier nicht überschrieben. Nur Content/Topbar/Cards/Modals/Tabellen flippen. Brand-Coral, Status-Farben (green/amber/red/blue) bleiben identisch — die Hue ist auf beiden Hintergründen tragfähig, nur die "soft"-Varianten bekommen leicht abgedunkelte RGBA-Werte für besseren Kontrast. ========================================================================= */ :root[data-theme="dark"] { /* ─── Backgrounds ─────────────────────────────────────────────────────── */ --bg: #0f1114; --bg-2: #1a1d21; --bg-3: #22262c; --bg-warm: #1e2126; /* ─── Text ───────────────────────────────────────────────────────────── */ --ink: #f0f0ec; --ink-2: #d4d4d0; --mute: #9d9da2; --mute-2: #6a6a70; /* ─── Rules + Dividers ───────────────────────────────────────────────── */ --rule: #2d3138; --rule-2: #3a3f47; /* ─── Status (soft-Varianten leicht angepasst für Dark-BG) ──────────── */ --green-soft: rgba(22, 163, 74, 0.18); --amber-soft: rgba(245, 158, 11, 0.18); --red-soft: rgba(220, 38, 38, 0.20); --blue-soft: rgba(0, 112, 224, 0.20); --coral-soft: rgba(255, 77, 77, 0.18); /* ─── Overlay / Shadow (dunkler, weniger sichtbar auf Dark-BG) ─────── */ --overlay: rgba(0, 0, 0, 0.65); --shadow-modal: 0 24px 60px -20px rgba(0, 0, 0, 0.7); --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-lift: 0 6px 18px -8px rgba(0, 0, 0, 0.5); /* ─── Theme-aware Surfaces ──────────────────────────────────────────── */ --topbar-bg: rgba(15, 17, 20, 0.85); --topbar-icon: #e5e7eb; --topbar-icon-hover: #ffffff; --row-zebra: rgba(255, 255, 255, 0.025); /* Auf --ink-Flächen — --ink ist im Dark-Mode hell, also sind hier dunkle * Tints nötig damit Borders sichtbar bleiben. */ --on-ink: #0f1114; --on-ink-border-soft: rgba(0, 0, 0, 0.25); --on-ink-border: rgba(0, 0, 0, 0.45); --on-ink-tint: rgba(0, 0, 0, 0.10); /* Hover auf hellen Karten/Banner */ --hover-tint: rgba(255, 255, 255, 0.06); /* Sidebar bleibt per Spec in beiden Themes dunkel — keine Sidebar-Token- * Overrides hier. Light-Mode-Defaults aus :root gelten weiter. */ } /* prefers-reduced-motion respektieren (§8, §14) */ @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; } }