/* ─── Bar-Key Website Design Tokens ─── CSS custom properties for theming + white-label potential. Three theme variants via [data-theme] on . */ :root { /* ── Brand Colors ── */ --color-coral: #FF5E6B; --color-coral-light: #FF8A93; --color-coral-dark: #E5444F; --color-teal: #17313B; --color-teal-light: #1E4958; --color-teal-dark: #0F2028; --color-tan: #ECDEDB; --color-tan-light: #F5EDEB; --color-gold: #FFB800; --color-gold-light: #FFCC40; --color-bronze: #C9996E; --color-bronze-dark: #A87D58; --color-gray-light: #E8E8E8; /* ── Neutrals ── */ --color-white: #FFFFFF; --color-ivory: #FAFAF7; --color-cream: #F9F6F3; --color-charcoal: #262626; --color-gray-accent: #737373; --color-body-text: #404040; --color-black: #0A0A0A; /* ── Typography ── */ --font-sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --text-display: 4.5rem; --text-display-sm: 3.75rem; --text-hero: 3rem; --text-hero-sm: 2.25rem; --text-section: 2rem; --text-section-sm: 1.5rem; --text-card-title: 1.25rem; --text-body: 1rem; --text-body-sm: 0.875rem; --text-caption: 0.75rem; --text-eyebrow: 0.6875rem; --text-nav: 0.75rem; /* ── Spacing ── */ --space-section-sm: 3.5rem; --space-section-lg: 5rem; --space-container-sm: 1.5rem; --space-container-md: 3rem; --space-container-lg: 4.5rem; /* ── Layout ── */ --header-height: 72px; --header-height-mobile: 60px; --max-width-content: 1200px; --max-width-wide: 1440px; --max-width-prose: 65ch; /* ── Transitions ── */ --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 350ms ease; /* ── Shadows ── */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); /* ── Radii ── */ --radius-sm: 0.25rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-2xl: 1.5rem; --radius-full: 9999px; /* ── Semantic (overridden by themes) ── */ --color-bg: var(--color-teal); --color-text: var(--color-white); --color-text-muted: rgba(255, 255, 255, 0.7); --color-accent: var(--color-coral); --color-accent-hover: var(--color-coral-dark); --color-surface: rgba(255, 255, 255, 0.05); --color-border: rgba(255, 255, 255, 0.12); } /* ── Theme: Dark (homepage, events, gallery) ── */ [data-theme="dark"] { --color-bg: var(--color-teal); --color-text: var(--color-white); --color-text-muted: rgba(255, 255, 255, 0.7); --color-accent: var(--color-coral); --color-accent-hover: var(--color-coral-dark); --color-surface: rgba(255, 255, 255, 0.05); --color-border: rgba(255, 255, 255, 0.12); } /* ── Theme: Light (about, faqs, contact) ── */ [data-theme="light"] { --color-bg: var(--color-cream); --color-text: var(--color-charcoal); --color-text-muted: var(--color-gray-accent); --color-accent: var(--color-teal); --color-accent-hover: var(--color-teal-light); --color-surface: var(--color-white); --color-border: rgba(0, 0, 0, 0.08); } /* ── Theme: Wedding (weddings page) ── */ [data-theme="wedding"] { --color-bg: var(--color-ivory); --color-text: var(--color-charcoal); --color-text-muted: var(--color-gray-accent); --color-accent: var(--color-coral); --color-accent-hover: var(--color-coral-dark); --color-surface: var(--color-white); --color-border: rgba(0, 0, 0, 0.06); } /* ── Reduced Motion ── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }