/* ========================================================================== Design tokens Single source of truth for brand colors, typography, spacing and layout. Change a value here to update it everywhere across the site. ========================================================================== */ :root { /* --- Brand colors ------------------------------------------------------ */ --color-brand: #8e75b5; /* Primary purple */ --color-brand-dark: #7a62a3; /* Darker purple for hover/active states */ --color-brand-tint: #e7e1f0; /* Light purple for subtle backgrounds */ --color-brand-faint: rgba(142, 117, 181, 0.22); /* Decorative accents (guillemets, etc.) */ --color-white: #ffffff; /* --- Status (opening hours) --------------------------------------------- */ --color-open-bg: #e6f4ea; /* Soft pastel green */ --color-open-text: #2f8f5b; --color-closed-bg: #fdebeb; /* Soft pastel red */ --color-closed-text: #d0555a; /* --- Surfaces & text --------------------------------------------------- */ --color-surface: #ffffff; /* Default page background */ --color-surface-alt: #f5f4f7; /* Alternate section background (light grey) */ --color-text: #2f2f33; /* Body text */ --color-text-muted: #6b6b72; /* Secondary text */ --color-text-on-brand: #ffffff; /* Text placed on the purple brand color */ --color-border: #e4e2ea; /* Hairline borders */ /* --- Typography -------------------------------------------------------- */ /* proxima-soft is loaded via Adobe Fonts (Typekit) in the . */ --font-body: "proxima-soft", "Segoe UI", system-ui, -apple-system, sans-serif; --font-display: "proxima-soft", "Segoe UI", system-ui, -apple-system, sans-serif; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Fluid type scale (min size, preferred, max size) */ --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: clamp(1.25rem, 1rem + 1vw, 1.5rem); --text-2xl: clamp(1.5rem, 1rem + 2vw, 2.25rem); --text-hero: clamp(2.5rem, 1.5rem + 5vw, 5rem); --leading-tight: 1.15; --leading-normal: 1.6; --tracking-wide: 0.08em; /* Letter-spacing for uppercase nav/labels */ /* --- Spacing scale ----------------------------------------------------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem; --space-24: 6rem; /* --- Layout ------------------------------------------------------------ */ --container-max: 1200px; /* Max content width */ --container-narrow: 760px; /* Narrow width for reading columns */ --gutter: clamp(1rem, 5vw, 3rem);/* Horizontal page padding */ --header-height: 87px; /* Fixed header height (used for offsets) */ --section-curve: clamp(32px, 5vw, 72px); /* Radius/overlap for curved section edges */ --section-space: clamp(48px, 7vw, 75px); /* Shared vertical padding for sections */ /* --- Radius & shadow --------------------------------------------------- */ --radius-md: 12px; --radius-lg: 24px; --radius-pill: 999px; /* Pill-shaped buttons */ --shadow-sm: 0 2px 8px rgba(47, 47, 51, 0.08); --shadow-md: 0 8px 30px rgba(47, 47, 51, 0.12); /* --- Motion ------------------------------------------------------------ */ --transition: 200ms ease; }