/* ============================================================ Flashback Memories Platform — CSS Custom Properties Warm lifestyle palette inspired by event photo-sharing ============================================================ */ :root { --primary: #ffc107; --primary-dark: #f0a500; --primary-light: #ffe082; --primary-rgb: 255, 193, 7; --secondary: #ffbf00; --secondary-dark: #e6ac00; --accent: #2d2926; --accent-light: #3d3530; --bg: #f7f6f4; --bg-warm: #fffbf0; --bg-white: #ffffff; --bg-card: #ffffff; --bg-dark: #2d2926; --bg-darker: #1a1714; --text: #1a1714; --text-muted: #6b6560; --text-light: #a8a29e; --text-inverse: #ffffff; --text-on-primary: #1c1917; --border: #eceae7; --border-dark: #d6d1cc; --border-focus: var(--primary); --success: #10b981; --success-bg: #d1fae5; --warning: #f59e0b; --warning-bg: #fef3c7; --error: #ef4444; --error-bg: #fee2e2; --info: #3b82f6; --info-bg: #dbeafe; --shadow-sm: 0 1px 3px rgba(44, 41, 38, 0.08); --shadow: 0 4px 12px rgba(44, 41, 38, 0.1); --shadow-md: 0 12px 32px rgba(44, 41, 38, 0.12); --shadow-lg: 0 24px 56px rgba(44, 41, 38, 0.16); --shadow-primary: 0 4px 20px rgba(255, 193, 7, 0.4); --shadow-warm: 0 8px 32px rgba(44, 41, 38, 0.14); --font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.25rem; --font-size-2xl: 1.5rem; --font-size-3xl: 1.875rem; --font-size-4xl: 2.25rem; --font-size-5xl: 3rem; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem; --radius-sm: 4px; --radius: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-xl: 28px; --radius-2xl: 32px; --radius-full: 9999px; --sidebar-width: 260px; --topbar-height: 64px; --container-max: 1160px; --transition: 150ms ease; --transition-md: 280ms ease; --transition-slow: 450ms ease; --plan-free-color: #78716c; --plan-basic-color: #3b82f6; --plan-standard-color: #8b5cf6; --plan-premium-color: #f59e0b; } /* ============================================================ Flashback Memories — Dark-Grey Theme Applied via: $page->set_theme('dark-grey') Rendered as: All component styles consume var(--*) so they adapt automatically without duplication. Only token values change. ============================================================ */ [data-theme="dark-grey"] { /* Brand accent unchanged for consistency */ --primary: #ffc107; --primary-dark: #f0a500; --primary-light: #ffe082; --primary-rgb: 255, 193, 7; --secondary: #ffbf00; --secondary-dark: #e6ac00; /* Cool-grey surface accents */ --accent: #374151; --accent-light: #4b5563; /* Backgrounds — cool grey scale built around #F3F4F6 base */ --bg: #f3f4f6; --bg-warm: #f9fafb; --bg-white: #ffffff; --bg-card: #ffffff; --bg-dark: #e5e7eb; --bg-darker: #d1d5db; /* Text — dark for WCAG AA contrast on light surfaces */ --text: #111827; --text-muted: #6b7280; --text-light: #9ca3af; --text-inverse: #f3f4f6; --text-on-primary: #1c1917; /* Borders — cool grey, visible on light surface */ --border: #e5e7eb; --border-dark: #d1d5db; --border-focus: var(--primary); /* Status badges remain vibrant for accessibility */ --success: #10b981; --success-bg: #d1fae5; --warning: #f59e0b; --warning-bg: #fef3c7; --error: #ef4444; --error-bg: #fee2e2; --info: #3b82f6; --info-bg: #dbeafe; /* Shadows — soft and subtle on light surfaces */ --shadow-sm: 0 1px 3px rgba(17, 24, 39, 0.08); --shadow: 0 4px 12px rgba(17, 24, 39, 0.1); --shadow-md: 0 12px 32px rgba(17, 24, 39, 0.12); --shadow-lg: 0 24px 56px rgba(17, 24, 39, 0.16); --shadow-primary: 0 4px 20px rgba(255, 193, 7, 0.4); --shadow-warm: 0 8px 32px rgba(17, 24, 39, 0.1); }