/* ========================================================================== Our Memory Book — Design System Aesthetic: "Intimate Warmth" — literary elegance meets personal warmth ========================================================================== */ /* ---------- Fonts ---------- */ /* Font loading moved to in base.html for faster preconnect */ /* ---------- Design Tokens ---------- */ :root { /* Typography */ --font-display: 'Cormorant Garamond', 'Georgia', serif; --font-body: 'Outfit', system-ui, sans-serif; /* Palette — warm, grounded, intimate */ --color-bg: #F8F5F0; --color-bg-warm: #F3EDE5; --color-bg-card: #FFFCF8; --color-bg-card-hover: #FFF9F2; --color-surface: #EDE8E0; --color-text: #1A1614; --color-text-secondary: #5C524A; --color-text-muted: #8A7F76; --color-primary: #B85C38; --color-primary-hover: #9E4D2E; --color-primary-light: #D4A574; --color-primary-glow: rgba(184, 92, 56, 0.12); --color-text-on-primary: #FFFCF8; --color-accent: #7D8471; --color-accent-light: #A8B09E; --color-border: #DDD5CB; --color-border-light: #EAE4DC; --color-border-focus: var(--color-primary); --color-success: #5E8B65; --color-error: #C0503E; --color-warning: #C49333; --color-info: #5B7FA0; /* Spacing */ --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2.5rem; --space-2xl: 4rem; --space-3xl: 6rem; /* Radius */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 20px; /* Shadows — warm-tinted */ --shadow-sm: 0 1px 3px rgba(26, 22, 20, 0.06); --shadow-md: 0 4px 12px rgba(26, 22, 20, 0.08); --shadow-lg: 0 8px 30px rgba(26, 22, 20, 0.10); --shadow-glow: 0 0 0 3px var(--color-primary-glow); /* Transitions */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --duration-fast: 150ms; --duration-normal: 300ms; --duration-slow: 500ms; }