/* * Design Tokens - Family Photo Archive * * A warm, vintage-inspired design system for a photo processing project. * Dark theme: Rich navy/slate tones that complement vintage photos. * Light theme: Cream/archival feel suitable for printing and sharing. * * Usage: * - Default follows system preference via prefers-color-scheme * - Manual override via data-theme="dark" or data-theme="light" on */ /* ================================================================ LIGHT THEME (default) ================================================================ */ :root { /* --- Backgrounds --- */ --color-bg: #faf8f5; /* warm cream */ --color-bg-warm: #f5f0e8; /* parchment undertone */ --color-surface: #ffffff; --color-surface-raised: #ffffff; --color-surface-overlay: rgba(250, 248, 245, 0.92); --color-surface-sunken: #f0ece4; /* --- Text --- */ --color-text: #1c1917; /* warm near-black */ --color-text-secondary: #44403c; --color-text-muted: #78716c; --color-text-faint: #a8a29e; --color-text-inverse: #faf8f5; /* --- Accent: Amber/Gold (photo heritage) --- */ --color-accent: #b45309; /* warm amber */ --color-accent-hover: #92400e; --color-accent-subtle: #fef3c7; --color-accent-text: #92400e; /* --- Accent 2: Blue (interactive elements) --- */ --color-interactive: #2563eb; --color-interactive-hover:#1d4ed8; --color-interactive-subtle:#dbeafe; /* --- Accent 3: Success/Green --- */ --color-success: #16a34a; --color-success-subtle: #dcfce7; /* --- Accent 4: Purple (AI features) --- */ --color-ai: #7c3aed; --color-ai-subtle: #ede9fe; /* --- Accent 5: Rose (restoration) --- */ --color-restore: #e11d48; --color-restore-subtle: #ffe4e6; /* --- Borders --- */ --color-border: #e7e5e4; --color-border-strong: #d6d3d1; --color-border-subtle: #f5f5f4; /* --- Shadows --- */ --shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.05); --shadow-md: 0 4px 6px -1px rgba(28, 25, 23, 0.07), 0 2px 4px -2px rgba(28, 25, 23, 0.05); --shadow-lg: 0 10px 15px -3px rgba(28, 25, 23, 0.08), 0 4px 6px -4px rgba(28, 25, 23, 0.04); --shadow-xl: 0 20px 25px -5px rgba(28, 25, 23, 0.1), 0 8px 10px -6px rgba(28, 25, 23, 0.04); --shadow-glow: 0 0 20px rgba(180, 83, 9, 0.15); /* --- Border Radius --- */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-full: 9999px; /* --- Spacing Scale --- */ --space-0: 0; --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; /* --- Typography --- */ --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-serif: 'Georgia', 'Times New Roman', 'Palatino Linotype', serif; --font-mono: 'SF Mono', 'Fira Code', 'JetBrains Mono', 'Cascadia Code', 'Consolas', monospace; --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ --text-5xl: 3rem; /* 48px */ --leading-tight: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.625; --tracking-tight: -0.025em; --tracking-normal: 0; --tracking-wide: 0.025em; --weight-normal: 400; --weight-medium: 500; --weight-semibold:600; --weight-bold: 700; /* --- Transitions --- */ --duration-fast: 100ms; --duration-normal: 200ms; --duration-slow: 300ms; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1); /* --- Z-Index --- */ --z-base: 0; --z-raised: 10; --z-overlay: 100; --z-modal: 200; --z-toast: 300; --z-max: 999; /* --- Diagram Colors (for SVG integration) --- */ --diagram-blue: #3b82f6; --diagram-purple: #a855f7; --diagram-green: #22c55e; --diagram-amber: #f59e0b; --diagram-rose: #f43f5e; } /* ================================================================ DARK THEME (system preference) ================================================================ */ @media (prefers-color-scheme: dark) { :root { --color-bg: #0c0f14; /* deep navy-black */ --color-bg-warm: #12161e; /* warm-shifted dark */ --color-surface: #181d27; /* raised surface */ --color-surface-raised: #1e2433; --color-surface-overlay: rgba(12, 15, 20, 0.92); --color-surface-sunken: #080a0e; --color-text: #e8e4de; /* warm off-white */ --color-text-secondary: #b8b0a4; --color-text-muted: #7d7568; --color-text-faint: #524d45; --color-text-inverse: #1c1917; --color-accent: #f59e0b; /* bright amber */ --color-accent-hover: #fbbf24; --color-accent-subtle: rgba(245, 158, 11, 0.12); --color-accent-text: #fbbf24; --color-interactive: #60a5fa; --color-interactive-hover:#93c5fd; --color-interactive-subtle:rgba(96, 165, 250, 0.12); --color-success: #4ade80; --color-success-subtle: rgba(74, 222, 128, 0.12); --color-ai: #a78bfa; --color-ai-subtle: rgba(167, 139, 250, 0.12); --color-restore: #fb7185; --color-restore-subtle: rgba(251, 113, 133, 0.12); --color-border: #262d3a; --color-border-strong: #374151; --color-border-subtle: #1a2030; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.3); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 8px 10px -6px rgba(0, 0, 0, 0.3); --shadow-glow: 0 0 30px rgba(245, 158, 11, 0.2); } } /* ================================================================ MANUAL THEME OVERRIDES (for toggle switch - these override the system preference) ================================================================ */ [data-theme="light"] { --color-bg: #faf8f5; --color-bg-warm: #f5f0e8; --color-surface: #ffffff; --color-surface-raised: #ffffff; --color-surface-overlay: rgba(250, 248, 245, 0.92); --color-surface-sunken: #f0ece4; --color-text: #1c1917; --color-text-secondary: #44403c; --color-text-muted: #78716c; --color-text-faint: #a8a29e; --color-text-inverse: #faf8f5; --color-accent: #b45309; --color-accent-hover: #92400e; --color-accent-subtle: #fef3c7; --color-accent-text: #92400e; --color-interactive: #2563eb; --color-interactive-hover:#1d4ed8; --color-interactive-subtle:#dbeafe; --color-success: #16a34a; --color-success-subtle: #dcfce7; --color-ai: #7c3aed; --color-ai-subtle: #ede9fe; --color-restore: #e11d48; --color-restore-subtle: #ffe4e6; --color-border: #e7e5e4; --color-border-strong: #d6d3d1; --color-border-subtle: #f5f5f4; --shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.05); --shadow-md: 0 4px 6px -1px rgba(28, 25, 23, 0.07), 0 2px 4px -2px rgba(28, 25, 23, 0.05); --shadow-lg: 0 10px 15px -3px rgba(28, 25, 23, 0.08), 0 4px 6px -4px rgba(28, 25, 23, 0.04); --shadow-xl: 0 20px 25px -5px rgba(28, 25, 23, 0.1), 0 8px 10px -6px rgba(28, 25, 23, 0.04); --shadow-glow: 0 0 20px rgba(180, 83, 9, 0.15); } [data-theme="dark"] { --color-bg: #0c0f14; --color-bg-warm: #12161e; --color-surface: #181d27; --color-surface-raised: #1e2433; --color-surface-overlay: rgba(12, 15, 20, 0.92); --color-surface-sunken: #080a0e; --color-text: #e8e4de; --color-text-secondary: #b8b0a4; --color-text-muted: #7d7568; --color-text-faint: #524d45; --color-text-inverse: #1c1917; --color-accent: #f59e0b; --color-accent-hover: #fbbf24; --color-accent-subtle: rgba(245, 158, 11, 0.12); --color-accent-text: #fbbf24; --color-interactive: #60a5fa; --color-interactive-hover:#93c5fd; --color-interactive-subtle:rgba(96, 165, 250, 0.12); --color-success: #4ade80; --color-success-subtle: rgba(74, 222, 128, 0.12); --color-ai: #a78bfa; --color-ai-subtle: rgba(167, 139, 250, 0.12); --color-restore: #fb7185; --color-restore-subtle: rgba(251, 113, 133, 0.12); --color-border: #262d3a; --color-border-strong: #374151; --color-border-subtle: #1a2030; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.3); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 8px 10px -6px rgba(0, 0, 0, 0.3); --shadow-glow: 0 0 30px rgba(245, 158, 11, 0.2); }