/* ============================================================ EDWARDS KITCHEN & BATH — Design Tokens Brand: #630b11 primary · #c1a37d accent tan · Cormorant + Switzer ============================================================ */ /* --- Type Scale --- */ :root { --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem); --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem); --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem); --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem); --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem); --text-3xl: clamp(2.5rem, 1rem + 4vw, 5rem); --text-hero: clamp(3rem, 0.5rem + 7vw, 7.5rem); } /* --- Spacing (4px base) --- */ :root { --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; } /* --- Brand Palette — Light Mode --- */ :root, [data-theme="light"] { /* Brand */ --color-brand: #630b11; --color-brand-hover: #4d0a0d; --color-brand-light: rgba(99, 11, 17, 0.08); --color-logo-red: #c11818; --color-accent-tan: #c1a37d; --color-accent-tan-2: #b4946f; /* Surfaces */ --color-bg: #F5F2EC; --color-surface: #FAF8F3; --color-surface-2: #FDFCFA; --color-surface-offset: #EDE9E1; --color-divider: #DDD9D1; --color-border: #D4CFC7; /* Text */ --color-text: #211F1C; --color-text-muted: #6B6762; --color-text-faint: #A09C97; --color-text-inverse: #F5F2EC; /* Dark section surfaces */ --color-dark-bg: #1C1A18; --color-dark-surface: #222019; --color-dark-text: #CCCAC6; --color-dark-muted: #807D79; /* Utilities */ --radius-sm: 0.25rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1.25rem; --radius-full: 9999px; --shadow-sm: 0 1px 3px rgba(33, 31, 28, 0.06); --shadow-md: 0 4px 16px rgba(33, 31, 28, 0.09); --shadow-lg: 0 12px 40px rgba(33, 31, 28, 0.13); --transition: 200ms cubic-bezier(0.16, 1, 0.3, 1); --transition-slow: 400ms cubic-bezier(0.16, 1, 0.3, 1); --content-narrow: 640px; --content-default: 960px; --content-wide: 1400px; --content-xwide: 1600px; /* Fonts */ --font-display: 'Cormorant', 'Georgia', serif; --font-body: 'Switzer', 'Helvetica Neue', sans-serif; } /* --- Dark Mode --- */ [data-theme="dark"] { --color-bg: #1C1A18; --color-surface: #222019; --color-surface-2: #272521; --color-surface-offset: #282520; --color-divider: #2E2C29; --color-border: #383430; --color-text: #CCCAC6; --color-text-muted: #807D79; --color-text-faint: #5a5754; --color-text-inverse: #1C1A18; --color-brand: #8a1018; --color-brand-hover: #a8151e; --color-brand-light: rgba(138, 16, 24, 0.15); --color-accent-tan: #c9ab85; --color-dark-bg: #141210; --color-dark-surface: #1a1816; --shadow-sm: 0 1px 3px rgba(0,0,0,0.2); --shadow-md: 0 4px 16px rgba(0,0,0,0.3); --shadow-lg: 0 12px 40px rgba(0,0,0,0.4); } /* OS-level dark preference is intentionally ignored. Theme is always explicitly set via data-theme attribute (inline script in ). Users can toggle via the theme button. Default is always light. */