:root { /* Colors — neutral foundation, invitation artwork provides the color. */ --color-primary: #b5473c; /* editorial accent, adjust to brand */ --color-primary-dark: #953a30; --color-text: #201b19; --color-text-muted: #6b625f; --color-background: #fdfbfa; --color-surface: #ffffff; --color-border: #e7e0dc; --color-accent-soft: #f6efe9; --color-success: #2f7a4d; --color-error: #b3261e; /* Radius */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; /* Spacing */ --spacing-xs: 0.5rem; --spacing-sm: 1rem; --spacing-md: 1.75rem; --spacing-lg: 3rem; --spacing-xl: 5rem; /* Layout */ --container-width: 1240px; --header-height: 76px; /* Type */ --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-display: Georgia, "Times New Roman", serif; /* swap for a local webfont if desired */ } @media (prefers-color-scheme: dark) { /* Opt-in dark mode; the storefront defaults to light for merchandising reasons (invitation artwork reads better on a light background), so this only activates if the store owner adds data-theme="dark" to — it is not automatic from OS preference. */ :root[data-theme="dark"] { --color-text: #f2ede9; --color-text-muted: #b9b0ac; --color-background: #17110f; --color-surface: #221a17; --color-border: #382c27; --color-accent-soft: #2a2019; } }