/* Berichtsabgabe — Design Tokens * * CSS Custom Properties als single source of truth für Farben, Typografie, * Spacing, Radien, Schatten, Animationen. Beide Themes (Light + Dark) werden * über das selbe Token-Set definiert; das aktive Theme wird über das * data-theme="light|dark"-Attribut am -Element gewählt. Fallback ist * das System-Setting via prefers-color-scheme. * * Schriftarten werden self-hosted ausgeliefert (kein Google-Fonts-CDN): * - Inter Variable (SIL Open Font License) * - JetBrains Mono (Apache-2.0) */ /* ─── @font-face — Self-hosted, DSGVO-konform ────────────────────────── */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; /* Variable Font deckt alle Gewichte ab */ font-display: swap; src: url("../fonts/InterVariable.woff2") format("woff2-variations"), url("../fonts/InterVariable.woff2") format("woff2"); } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/JetBrainsMono-Regular.woff2") format("woff2"); } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/JetBrainsMono-Medium.woff2") format("woff2"); } :root { /* ─── Farb-Skalen (semantisch, nicht roh) ───────────────────────────── */ /* Primär: Indigo — Hauptaktionen, Links, Brand-Akzent */ --c-primary-50: #eef2ff; --c-primary-100: #e0e7ff; --c-primary-300: #a5b4fc; --c-primary-500: #6366f1; --c-primary-600: #4f46e5; --c-primary-700: #4338ca; --c-primary-900: #312e81; /* Erfolg: Mint — Freigaben, positive Bestätigungen */ --c-success-50: #ecfdf5; --c-success-500: #10b981; --c-success-600: #059669; --c-success-700: #047857; /* Warnung: Bernstein — Hinweise, "Bitte beachten" */ --c-warning-50: #fffbeb; --c-warning-500: #f59e0b; --c-warning-600: #d97706; --c-warning-700: #b45309; /* Fehler: Rot — Fehler, destruktive Aktionen */ --c-danger-50: #fef2f2; --c-danger-500: #ef4444; --c-danger-600: #dc2626; --c-danger-700: #b91c1c; /* Neutral: Slate — Texte, Hintergründe, Borders */ --c-neutral-0: #ffffff; --c-neutral-50: #f8fafc; --c-neutral-100: #f1f5f9; --c-neutral-200: #e2e8f0; --c-neutral-300: #cbd5e1; --c-neutral-400: #94a3b8; --c-neutral-500: #64748b; --c-neutral-600: #475569; --c-neutral-700: #334155; --c-neutral-800: #1e293b; --c-neutral-900: #0f172a; --c-neutral-950: #020617; /* ─── Typografie ────────────────────────────────────────────────────── */ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* Schrift-Größen — modulare Skala, 1.125 (Major Second) */ --fs-xs: 0.75rem; /* 12px — Captions, Labels */ --fs-sm: 0.875rem; /* 14px — Sekundärtext */ --fs-base: 1rem; /* 16px — Body */ --fs-lg: 1.125rem; /* 18px — Lead-Text */ --fs-xl: 1.25rem; /* 20px — H4 */ --fs-2xl: 1.5rem; /* 24px — H3 */ --fs-3xl: 1.875rem; /* 30px — H2 */ --fs-4xl: 2.25rem; /* 36px — H1 */ --fs-5xl: 3rem; /* 48px — Display */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --lh-tight: 1.2; --lh-snug: 1.35; --lh-normal: 1.5; --lh-relaxed: 1.65; /* ─── Spacing — 4er-Grid ────────────────────────────────────────────── */ --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.25rem; /* 20 */ --space-6: 1.5rem; /* 24 */ --space-8: 2rem; /* 32 */ --space-10: 2.5rem; /* 40 */ --space-12: 3rem; /* 48 */ --space-16: 4rem; /* 64 */ --space-20: 5rem; /* 80 */ /* ─── Radien ────────────────────────────────────────────────────────── */ --r-sm: 0.25rem; /* 4 — kleine Chips */ --r-md: 0.5rem; /* 8 — Buttons, Inputs */ --r-lg: 0.75rem; /* 12 — Cards */ --r-xl: 1rem; /* 16 — Modals */ --r-2xl: 1.5rem; /* 24 — Floating Hero */ --r-full: 9999px; /* Pills, Avatare */ /* ─── Schatten ──────────────────────────────────────────────────────── */ --shadow-xs: 0 1px 2px 0 rgb(15 23 42 / 0.04); --shadow-sm: 0 1px 3px 0 rgb(15 23 42 / 0.08), 0 1px 2px -1px rgb(15 23 42 / 0.04); --shadow-md: 0 4px 8px -2px rgb(15 23 42 / 0.08), 0 2px 4px -2px rgb(15 23 42 / 0.04); --shadow-lg: 0 10px 20px -4px rgb(15 23 42 / 0.10), 0 4px 8px -4px rgb(15 23 42 / 0.06); --shadow-xl: 0 20px 32px -8px rgb(15 23 42 / 0.14), 0 8px 16px -6px rgb(15 23 42 / 0.08); --shadow-focus: 0 0 0 3px rgb(99 102 241 / 0.35); /* ─── Animations-Timings ────────────────────────────────────────────── */ --t-fast: 120ms; --t-normal: 200ms; --t-slow: 350ms; --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); /* ─── Layout-Konstanten ─────────────────────────────────────────────── */ --max-w-content: 72rem; /* 1152px — Hauptcontent */ --max-w-narrow: 42rem; /* 672px — Forms, Read-Width */ --sidebar-w: 16rem; /* 256px — Linke Navigation */ --topbar-h: 4rem; /* 64px — Top-Leiste */ } /* ═══ Light Theme (Default) ════════════════════════════════════════════ */ :root, :root[data-theme="light"] { --bg-app: var(--c-neutral-50); --bg-surface: var(--c-neutral-0); --bg-surface-2: var(--c-neutral-100); --bg-hover: var(--c-neutral-100); --bg-active: var(--c-neutral-200); --text-primary: var(--c-neutral-900); --text-secondary: var(--c-neutral-600); --text-muted: var(--c-neutral-500); --text-inverse: var(--c-neutral-0); --text-link: var(--c-primary-600); --border-subtle: var(--c-neutral-200); --border-default: var(--c-neutral-300); --border-strong: var(--c-neutral-400); --bg-primary: var(--c-primary-600); --bg-primary-hover: var(--c-primary-700); --bg-primary-soft: var(--c-primary-50); --text-on-primary: var(--c-neutral-0); --text-primary-soft: var(--c-primary-700); --bg-success-soft: var(--c-success-50); --text-success: var(--c-success-700); --bg-warning-soft: var(--c-warning-50); --text-warning: var(--c-warning-700); --bg-danger-soft: var(--c-danger-50); --text-danger: var(--c-danger-700); } /* ═══ Dark Theme ═══════════════════════════════════════════════════════ */ :root[data-theme="dark"] { --bg-app: var(--c-neutral-950); --bg-surface: var(--c-neutral-900); --bg-surface-2: var(--c-neutral-800); --bg-hover: var(--c-neutral-800); --bg-active: var(--c-neutral-700); --text-primary: var(--c-neutral-50); --text-secondary: var(--c-neutral-300); --text-muted: var(--c-neutral-400); --text-inverse: var(--c-neutral-900); --text-link: var(--c-primary-300); --border-subtle: var(--c-neutral-800); --border-default: var(--c-neutral-700); --border-strong: var(--c-neutral-600); --bg-primary: var(--c-primary-500); --bg-primary-hover: var(--c-primary-600); --bg-primary-soft: color-mix(in oklab, var(--c-primary-500) 18%, transparent); --text-on-primary: var(--c-neutral-0); --text-primary-soft: var(--c-primary-300); --bg-success-soft: color-mix(in oklab, var(--c-success-500) 18%, transparent); --text-success: var(--c-success-500); --bg-warning-soft: color-mix(in oklab, var(--c-warning-500) 18%, transparent); --text-warning: var(--c-warning-500); --bg-danger-soft: color-mix(in oklab, var(--c-danger-500) 22%, transparent); --text-danger: var(--c-danger-500); } /* Fallback auf System-Setting, wenn kein data-theme gesetzt */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --bg-app: var(--c-neutral-950); --bg-surface: var(--c-neutral-900); --bg-surface-2: var(--c-neutral-800); --bg-hover: var(--c-neutral-800); --bg-active: var(--c-neutral-700); --text-primary: var(--c-neutral-50); --text-secondary: var(--c-neutral-300); --text-muted: var(--c-neutral-400); --text-inverse: var(--c-neutral-900); --text-link: var(--c-primary-300); --border-subtle: var(--c-neutral-800); --border-default: var(--c-neutral-700); --border-strong: var(--c-neutral-600); --bg-primary: var(--c-primary-500); --bg-primary-hover: var(--c-primary-600); --bg-primary-soft: color-mix(in oklab, var(--c-primary-500) 18%, transparent); --text-on-primary: var(--c-neutral-0); --text-primary-soft: var(--c-primary-300); --bg-success-soft: color-mix(in oklab, var(--c-success-500) 18%, transparent); --text-success: var(--c-success-500); --bg-warning-soft: color-mix(in oklab, var(--c-warning-500) 18%, transparent); --text-warning: var(--c-warning-500); --bg-danger-soft: color-mix(in oklab, var(--c-danger-500) 22%, transparent); --text-danger: var(--c-danger-500); } }