/* ============================================================================= Design Tokens - Apple-Aligned Liquid Glass Extracted from Apple CSS analysis (42k lines) - aligned for acquisition-ready quality ============================================================================= */ :root { /* --------------------------------------------------------------------------- Colors - Warm Editorial (Our Identity) --------------------------------------------------------------------------- */ --c-base: #FAF8F5; --c-surface: #FFFFFF; --c-text: #1C1917; --c-text-soft: #57534E; --c-accent: #C2410C; --c-accent-soft: #EA580C; --c-accent-light: #FED7AA; --c-border: #E7E5E4; --c-highlight: #FED7AA; /* Status Colors */ --c-success: #22C55E; --c-success-light: #DCFCE7; --c-success-dark: #166534; --c-warning: #F59E0B; --c-warning-light: #FEF3C7; --c-warning-dark: #92400E; --c-error: #EF4444; --c-error-light: #FEE2E2; --c-error-dark: #991B1B; /* Focus Ring (Apple uses 3px blue rings) */ --c-focus-ring: var(--c-accent); /* --------------------------------------------------------------------------- Border Radius - Apple-Aligned Scale Apple's most used: 8px (47x), 11px (19x), 12px (11x), 16px (5x), 22px (4x) --------------------------------------------------------------------------- */ --radius-xs: 8px; /* Apple's most common - small elements */ --radius-s: 11px; /* Apple's button/input radius - CRITICAL */ --radius-m: 12px; /* Apple's medium elements */ --radius-l: 16px; /* Apple's card corners */ --radius-xl: 22px; /* Apple's large cards/panels */ --radius-2xl: 34px; /* Apple's hero sections */ --radius-full: 9999px; /* Pills, circles */ /* --------------------------------------------------------------------------- Glass Effects - Apple-Aligned Blur & Transparency Apple's blur: 15px (most common), 14px, 10px, 8px, 50px (dramatic) Apple's glass: rgba(248, 248, 252, .85/.5/.4) --------------------------------------------------------------------------- */ /* Light Glass (cards, surfaces) - adjusted to Apple's opacity levels */ --glass-bg: rgba(255, 255, 255, 0.85); /* Apple uses .85 for solid glass */ --glass-bg-strong: rgba(255, 255, 255, 0.85); /* Alias for compatibility */ --glass-bg-medium: rgba(255, 255, 255, 0.6); /* Apple uses .5-.6 for medium */ --glass-bg-subtle: rgba(255, 255, 255, 0.4); /* Apple uses .4 for subtle */ --glass-blur: 15px; /* Apple's most common blur */ --glass-blur-light: 10px; /* Apple's lighter blur */ --glass-blur-heavy: 50px; /* Apple's dramatic blur */ --glass-border: rgba(255, 255, 255, 0.6); --glass-border-subtle: rgba(255, 255, 255, 0.3); --glass-saturate: saturate(86%); /* Apple adds saturation boost */ /* Warm Glass (accent areas - our brand) */ --glass-warm: rgba(254, 215, 170, 0.4); --glass-warm-strong: rgba(254, 215, 170, 0.6); --glass-warm-border: rgba(194, 65, 12, 0.15); /* --------------------------------------------------------------------------- Shadows - Apple-Aligned Depth Apple's card: 0 11px 34px rgba(0, 0, 0, .16) Apple's floating: 17px 20px 40px (asymmetric!) Apple's focus: 0 0 0 3px (ring) --------------------------------------------------------------------------- */ /* Ambient (barely there) */ --shadow-ambient: 0 1px 3px rgba(0, 0, 0, 0.06); /* Raised (subtle lift) - Apple uses 0 3px 8px */ --shadow-raised: 0 3px 8px rgba(0, 0, 0, 0.1); /* Card (standard cards) - Apple's exact pattern */ --shadow-card: 0 11px 34px rgba(0, 0, 0, 0.16); /* Floating (hover, modals) - Apple's asymmetric dramatic shadow */ --shadow-floating: 17px 20px 40px rgba(0, 0, 0, 0.16); /* Dark mode / high contrast cards */ --shadow-card-strong: 0 11px 34px rgba(0, 0, 0, 0.32); /* Legacy aliases */ --shadow-sm: var(--shadow-ambient); --shadow-md: var(--shadow-card); --shadow-lg: var(--shadow-floating); /* Focus Ring (Apple uses 3px rings) */ --shadow-focus: 0 0 0 3px var(--c-focus-ring); /* Glow Effects (accent colors - our brand) */ --shadow-glow-accent: 0 0 34px rgba(194, 65, 12, 0.16); --shadow-glow-accent-strong: 0 0 40px rgba(194, 65, 12, 0.25); --shadow-glow-success: 0 0 28px rgba(34, 197, 94, 0.2); --shadow-glow-warning: 0 0 28px rgba(245, 158, 11, 0.2); /* Inner Light (glass shine) */ --shadow-inner-light: inset 0 1px 1px rgba(255, 255, 255, 0.8); --shadow-inner-light-subtle: inset 0 1px 0 rgba(255, 255, 255, 0.5); /* Glass Bevel Border - Apple's diagonal lighting effect 135deg gradient creates smooth edge transitions: - Top-left & bottom-right: bright (light source + reflection) - Top-right & bottom-left: subtle (in shadow) */ --glass-bevel-highlight: rgba(255, 255, 255, 0.7); --glass-bevel-subtle: rgba(255, 255, 255, 0.15); /* --------------------------------------------------------------------------- Typography - Apple-Aligned Scale Apple's sizes: 12, 14, 15, 17, 19, 21, 24, 28, 32, 40, 48px Apple's weights: 400 (regular), 500 (medium), 600 (semibold) --------------------------------------------------------------------------- */ --ff-display: 'Fraunces', Georgia, serif; --ff-body: 'DM Sans', system-ui, sans-serif; /* Apple-aligned font sizes */ --fs-xs: 12px; --fs-sm: 14px; --fs-base: 17px; /* Apple's default body */ --fs-lg: 19px; --fs-xl: 21px; --fs-2xl: 24px; --fs-3xl: 28px; --fs-4xl: 32px; --fs-5xl: 40px; /* Apple-aligned line heights */ --lh-tight: 1.2; --lh-snug: 1.35; --lh-normal: 1.47; /* ~25px at 17px = Apple's common ratio */ --lh-relaxed: 1.8; /* --------------------------------------------------------------------------- Spacing --------------------------------------------------------------------------- */ --space-xs: 0.5rem; /* 8px */ --space-s: 1rem; /* 16px */ --space-m: 1.25rem; /* 20px - Apple uses 20px heavily */ --space-l: 2rem; /* 32px */ --space-xl: 2.5rem; /* 40px - Apple uses 40px for sections */ --space-2xl: 5rem; /* 80px */ /* --------------------------------------------------------------------------- Animation - Apple-Aligned Timing Apple's easing: cubic-bezier(.32, .08, .24, 1) - fast start, smooth land Apple's duration: 0.2s (most common), 0.25s, 0.35s --------------------------------------------------------------------------- */ /* Easing Functions */ --ease-apple: cubic-bezier(0.32, 0.08, 0.24, 1); /* Apple's signature */ --ease-apple-dramatic: cubic-bezier(0.04, 0.04, 0.12, 0.96); /* Apple's hero animations */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* Springy overshoot */ --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1); /* Smooth standard */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* Fast out */ /* Duration - Apple-aligned */ --duration-micro: 100ms; --duration-fast: 200ms; /* Apple's most common */ --duration-normal: 250ms; /* Apple's second most common */ --duration-slow: 350ms; --duration-dramatic: 450ms; /* Legacy aliases */ --duration-med: var(--duration-slow); /* --------------------------------------------------------------------------- Z-Index Scale --------------------------------------------------------------------------- */ --z-base: 0; --z-dropdown: 100; --z-sticky: 200; --z-modal-backdrop: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600; --z-3d-overlay: 1000; /* Reserved for ThreeJS canvas */ /* --------------------------------------------------------------------------- Breakpoints - Apple-Aligned Apple's system: 759px (mobile), 760px (tablet), 1165px (desktop), 1690px (large) Usage: @media (max-width: 759px) for mobile, etc. Note: CSS custom properties can't be used in media queries directly, but these serve as documentation and can be used in JS. --------------------------------------------------------------------------- */ --bp-mobile-max: 759px; --bp-tablet-min: 760px; --bp-tablet-max: 1164px; --bp-desktop-min: 1165px; --bp-desktop-large: 1690px; --bp-small-mobile: 666px; /* --------------------------------------------------------------------------- Transform - Apple-Aligned Hover/Active States Apple uses scale for interactions, not translateY --------------------------------------------------------------------------- */ --hover-scale: 1.019; /* Apple's subtle 1.9% scale on hover */ --active-scale: 0.97; /* Press/active scale down */ --active-scale-strong: 0.9; /* Strong press (Apple uses this) */ }