/* =========================================================== MTC Tool — Design Tokens Version: ui-redesign-2026 · Phase 2 =========================================================== Single Source of Truth für alle Farben, Spacing, Typo, Shadows. NIEMALS Hex-Werte irgendwo anders hardcoden. Lade als ALLERERSTES CSS in jedem — vor form.css, library.css, dashboard.css. =========================================================== */ :root { /* ===== BASE ===== */ --bg: #EAE5D6; --bg-soft: #E0DAC8; --surface: #FFFFFF; --surface-soft: #F7F4EC; --border: #DDD6C5; --border-soft: #E8E2D2; /* ===== TEXT ===== */ --text-primary: #1A2D4A; --text-secondary: #4A5A78; --text-tertiary: #8995AB; --text-muted: #B5BCC9; /* ===== BRAND BLUE ===== */ --blue: #2563EB; --blue-hover: #1D4ED8; --blue-bg: #EFF6FF; --blue-tint: rgba(37, 99, 235, 0.06); --blue-border: rgba(37, 99, 235, 0.2); /* ===== NAVY ===== */ --navy: #1A2D4A; --navy-dark: #0F1E3D; /* ===== SECTION COLORS (all cool tones) ===== */ --c-slate: #475569; --c-slate-bg: rgba(100, 116, 139, 0.1); --c-blue: #2563EB; --c-blue-c-bg: rgba(59, 130, 246, 0.1); --c-teal: #0F766E; --c-teal-bg: rgba(20, 184, 166, 0.1); --c-indigo: #4F46E5; --c-indigo-bg: rgba(99, 102, 241, 0.1); --c-cyan: #0E7490; --c-cyan-bg: rgba(6, 182, 212, 0.1); --c-sky: #0369A1; --c-sky-bg: rgba(14, 165, 233, 0.1); --c-violet: #7C3AED; --c-violet-bg: rgba(139, 92, 246, 0.1); --c-rose: #BE185D; --c-rose-bg: rgba(244, 63, 94, 0.1); /* ===== STATUS ===== */ --amber: #D97706; --amber-bg: rgba(217, 119, 6, 0.1); --success: #059669; --success-bg: rgba(5, 150, 105, 0.08); --danger: #DC2626; --danger-bg: rgba(220, 38, 38, 0.08); /* ===== SHADOWS ===== */ --shadow-sm: 0 1px 2px rgba(26, 45, 74, 0.04); --shadow: 0 2px 8px rgba(26, 45, 74, 0.06); --shadow-lg: 0 8px 24px rgba(26, 45, 74, 0.08); --shadow-xl: 0 20px 50px rgba(26, 45, 74, 0.15); /* ===== FONTS ===== */ --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Monaco, Consolas, monospace; /* ===== TRANSITIONS ===== */ --t-fast: 0.10s; --t: 0.15s; --t-med: 0.25s; --t-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1); /* ===== Z-INDEX ===== */ --z-base: 1; --z-sticky: 50; --z-drawer: 60; --z-overlay: 100; --z-modal: 150; --z-toast: 200; --z-tooltip: 250; } /* ===== BASE — Body / Reset ===== */ html, body { margin: 0; padding: 0; overflow-x: hidden; } body { font-family: var(--font-sans); background: var(--bg); color: var(--text-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 14px; line-height: 1.45; text-rendering: optimizeLegibility; } *, *::before, *::after { box-sizing: border-box; } ::selection { background: var(--blue); color: #fff; }