/** * ============================================ * BRAINDUMP - UNIFIED DESIGN TOKENS v1.0.0 * ============================================ * * SINGLE SOURCE OF TRUTH für alle Design-Werte * Basiert auf Experten-Panel Empfehlungen: * - Julie Zhuo: Ein Primary Color * - Refactoring UI: Multi-layer Shadows * - Luke Wroblewski: Klare Typografie-Hierarchie * - Aarron Walter: Warm Vault Emotional Design * - Vitaly Friedman: Konsistente Radii * * PHILOSOPHY: "Notion meets Things 3" Hybrid * - Notion: Clean, minimal, content-first * - Things 3: Premium shadows, tactile feel * - BrainDump: Warm amber/gold signature * * @version 1.0.0 * @date 2026-01-04 */ :root { /* ================================================ SIGNATURE COLORS - Warm Vault Palette ================================================ */ /* Primary - Amber/Gold (BrainDump Signature) */ --bd-primary: #E6B87D; --bd-primary-light: #F0C994; --bd-primary-dark: #D48C44; --bd-primary-darker: #C77D33; --bd-primary-rgb: 230, 184, 125; /* Accent Colors - Warm Family */ --bd-accent-amber: #F59E0B; --bd-accent-rust: #C77D33; --bd-accent-warm-gray: #8B7355; --bd-accent-cream: #FFF8F0; /* ================================================ SEMANTIC COLORS ================================================ */ /* Functional */ --bd-success: #10B981; --bd-error: #EF4444; --bd-warning: #F59E0B; --bd-info: #3B82F6; /* Input Type Indicators - Muted, Not Screaming */ --bd-type-voice: #A78BFA; --bd-type-link: #34D399; --bd-type-text: #F472B6; --bd-type-file: #60A5FA; --bd-type-image: #FBBF24; /* ================================================ BACKGROUNDS - Consistent Elevation ================================================ */ /* Base Surfaces */ --bd-bg-app: #0A0A0A; --bd-bg-elevated: #141414; --bd-bg-card: #1A1A1A; --bd-bg-card-hover: #242424; --bd-bg-input: #1E1E1E; --bd-bg-overlay: rgba(0, 0, 0, 0.85); /* Action Card Background - Warm Tint */ --bd-bg-action: rgba(230, 184, 125, 0.08); --bd-bg-action-hover: rgba(230, 184, 125, 0.12); /* ================================================ TEXT COLORS ================================================ */ --bd-text-primary: #FFFFFF; --bd-text-secondary: rgba(255, 255, 255, 0.72); --bd-text-muted: rgba(255, 255, 255, 0.48); --bd-text-hint: rgba(255, 255, 255, 0.32); /* ================================================ BORDERS ================================================ */ --bd-border: rgba(255, 255, 255, 0.08); --bd-border-light: rgba(255, 255, 255, 0.12); --bd-border-focus: rgba(230, 184, 125, 0.5); --bd-border-action: rgba(230, 184, 125, 0.25); /* ================================================ BORDER RADIUS - Three Sizes Only ================================================ */ --bd-radius-sm: 8px; /* Tags, Chips, Small elements */ --bd-radius-md: 12px; /* Cards, Buttons, Inputs */ --bd-radius-lg: 16px; /* Modals, Sections, Containers */ --bd-radius-full: 9999px; /* ================================================ SHADOWS - Things 3 Multi-Layer Premium ================================================ */ /* Subtle elevation */ --bd-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08); /* Card elevation */ --bd-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.08), 0 8px 16px rgba(0, 0, 0, 0.04); /* Hover elevation - lifts card */ --bd-shadow-card-hover: 0 2px 4px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.1), 0 16px 32px rgba(0, 0, 0, 0.08); /* Action card glow */ --bd-shadow-action: 0 2px 4px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.1), 0 0 24px rgba(230, 184, 125, 0.1); /* Modal/Overlay */ --bd-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.15), 0 12px 24px rgba(0, 0, 0, 0.12), 0 24px 48px rgba(0, 0, 0, 0.1); /* Primary button glow */ --bd-glow-primary: 0 0 20px rgba(230, 184, 125, 0.3); --bd-glow-primary-strong: 0 0 30px rgba(230, 184, 125, 0.5); /* ================================================ TYPOGRAPHY - Clear Hierarchy ================================================ */ --bd-font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif; --bd-font-mono: 'SF Mono', Monaco, 'Cascadia Code', monospace; /* Size Scale - Meaningful Jumps */ --bd-text-xs: 11px; /* Section labels, badges */ --bd-text-sm: 13px; /* Meta, timestamps */ --bd-text-base: 15px; /* Body text */ --bd-text-lg: 17px; /* Card titles */ --bd-text-xl: 20px; /* Section headers */ --bd-text-2xl: 24px; /* Page titles */ --bd-text-3xl: 32px; /* Hero text */ /* Font Weights */ --bd-weight-normal: 400; --bd-weight-medium: 500; --bd-weight-semibold: 600; --bd-weight-bold: 700; --bd-weight-black: 800; /* Line Heights */ --bd-leading-tight: 1.25; --bd-leading-normal: 1.5; --bd-leading-relaxed: 1.65; /* ================================================ SPACING - 4px Base ================================================ */ --bd-space-1: 4px; --bd-space-2: 8px; --bd-space-3: 12px; --bd-space-4: 16px; --bd-space-5: 20px; --bd-space-6: 24px; --bd-space-8: 32px; --bd-space-10: 40px; --bd-space-12: 48px; /* ================================================ ANIMATION - Smooth & Premium ================================================ */ --bd-ease: cubic-bezier(0.4, 0, 0.2, 1); --bd-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); --bd-ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275); --bd-duration-fast: 150ms; --bd-duration-base: 200ms; --bd-duration-slow: 300ms; --bd-duration-slower: 500ms; /* ================================================ Z-INDEX - Layering System ================================================ */ --bd-z-base: 1; --bd-z-dropdown: 100; --bd-z-sticky: 200; --bd-z-overlay: 300; --bd-z-modal: 400; --bd-z-toast: 500; --bd-z-tooltip: 600; /* ================================================ QUICK-REPLY CHIPS - Warm Palette ================================================ */ /* Primary chips - Gold family */ --bd-chip-primary-bg: var(--bd-primary); --bd-chip-primary-text: #1A1A1A; /* Secondary chips - Muted warm */ --bd-chip-secondary-bg: rgba(230, 184, 125, 0.15); --bd-chip-secondary-text: var(--bd-primary); --bd-chip-secondary-border: rgba(230, 184, 125, 0.3); /* Action chips - Distinct but warm-compatible */ --bd-chip-calendar-bg: #4A90A4; /* Muted teal */ --bd-chip-todo-bg: #7B8A5E; /* Muted green */ --bd-chip-read-bg: #8B7355; /* Warm brown */ --bd-chip-later-bg: rgba(255, 255, 255, 0.1); --bd-chip-done-bg: rgba(16, 185, 129, 0.2); } /* ================================================ DARK MODE (Default) - Already set above ================================================ */ /* ================================================ LIGHT MODE SUPPORT ================================================ */ [data-theme="light"], [data-template="light-modern"] { --bd-bg-app: #F7F7F7; --bd-bg-elevated: #FFFFFF; --bd-bg-card: #FFFFFF; --bd-bg-card-hover: #F0F0F0; --bd-bg-input: #F5F5F5; --bd-text-primary: #1A1A1A; --bd-text-secondary: rgba(0, 0, 0, 0.65); --bd-text-muted: rgba(0, 0, 0, 0.45); --bd-border: rgba(0, 0, 0, 0.08); --bd-border-light: rgba(0, 0, 0, 0.12); --bd-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04); --bd-shadow-card-hover: 0 2px 4px rgba(0, 0, 0, 0.08), 0 8px 16px rgba(0, 0, 0, 0.06), 0 16px 32px rgba(0, 0, 0, 0.04); }