/** * Design tokens — single source of truth for color, type, spacing, radius, * shadow and motion. Every other CSS file in this theme reads these * variables; it never hardcodes a hex value or px size directly. * * Dark mode overrides the same variable names inside [data-theme="dark"], * so component CSS never needs a dark-mode-specific rule. */ :root { /* ---- Brand palette ---- */ --bcm-color-primary: #6F4E37; /* Coffee Brown */ --bcm-color-primary-dark: #56392A; --bcm-color-primary-light: #8A6A50; --bcm-color-accent: #C68B59; /* Cream / caramel accent */ --bcm-color-accent-dark: #B07845; --bcm-color-bg: #F8F5F1; /* Off-white page background */ --bcm-color-surface: #FFFFFF; --bcm-color-dark: #1F1F1F; --bcm-color-success: #3FA34D; --bcm-color-warning: #F6A623; --bcm-color-danger: #D64545; /* ---- Semantic text/border colors (light mode defaults) ---- */ --bcm-text-primary: var(--bcm-color-dark); --bcm-text-secondary: #5B5750; --bcm-text-muted: #8A8580; --bcm-text-on-primary: #FFFFFF; --bcm-border-color: #E7E1D9; --bcm-border-color-strong: #D3CABC; --bcm-surface-raised: #FFFFFF; --bcm-surface-sunken: #F1ECE4; --bcm-link-color: var(--bcm-color-primary); --bcm-focus-ring: #1F6FEB; /* ---- Typography ---- */ --bcm-font-heading: 'Poppins', 'Segoe UI', system-ui, sans-serif; --bcm-font-body: 'Inter', 'Segoe UI', system-ui, sans-serif; --bcm-heading-weight: 700; --bcm-button-weight: 600; /* Compact scale — deliberately smaller than a typical 16px-base site (matches the density of reference sites like alternativebrewing.com.au: ~13px body text, tight card padding, more columns per row). */ --bcm-fs-xs: 0.6875rem; --bcm-fs-sm: 0.8125rem; --bcm-fs-base: 0.9375rem; --bcm-fs-md: 1rem; --bcm-fs-lg: 1.125rem; --bcm-fs-xl: 1.375rem; --bcm-fs-2xl: 1.75rem; --bcm-fs-3xl: 2.25rem; --bcm-line-height-tight: 1.2; --bcm-line-height-base: 1.55; /* ---- Spacing scale ---- */ --bcm-space-1: 0.25rem; --bcm-space-2: 0.4rem; --bcm-space-3: 0.625rem; --bcm-space-4: 0.875rem; --bcm-space-5: 1.25rem; --bcm-space-6: 1.75rem; --bcm-space-7: 2.5rem; --bcm-space-8: 3.25rem; --bcm-space-9: 4.5rem; /* ---- Radius / shadow / motion ---- */ --bcm-radius-sm: 6px; --bcm-radius-md: 10px; --bcm-radius-lg: 14px; --bcm-radius-pill: 999px; --bcm-shadow-sm: 0 1px 2px rgba(31, 31, 31, 0.06), 0 1px 1px rgba(31, 31, 31, 0.04); --bcm-shadow-md: 0 8px 24px rgba(31, 31, 31, 0.08), 0 2px 6px rgba(31, 31, 31, 0.05); --bcm-shadow-lg: 0 20px 48px rgba(31, 31, 31, 0.14), 0 4px 12px rgba(31, 31, 31, 0.06); --bcm-shadow-hover: 0 14px 32px rgba(111, 78, 55, 0.18); --bcm-ease: cubic-bezier(0.22, 1, 0.36, 1); --bcm-duration-fast: 150ms; --bcm-duration-base: 250ms; --bcm-duration-slow: 450ms; /* ---- Layout ---- */ --bcm-container-max: 1280px; --bcm-container-narrow: 860px; --bcm-header-height: 60px; --bcm-gutter: clamp(1rem, 3vw, 2.5rem); } /** * Dark mode. Toggled by adding data-theme="dark" to (see main.js), * and respected automatically on first visit via prefers-color-scheme. */ :root[data-theme='dark'] { --bcm-color-bg: #17140F; --bcm-color-surface: #211C16; --bcm-text-primary: #F3EEE7; --bcm-text-secondary: #C7BFB4; --bcm-text-muted: #948C80; --bcm-border-color: #362F26; --bcm-border-color-strong: #463C30; --bcm-surface-raised: #241F18; --bcm-surface-sunken: #1B1712; --bcm-link-color: var(--bcm-color-accent); --bcm-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --bcm-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45); --bcm-shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.55); } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --bcm-color-bg: #17140F; --bcm-color-surface: #211C16; --bcm-text-primary: #F3EEE7; --bcm-text-secondary: #C7BFB4; --bcm-text-muted: #948C80; --bcm-border-color: #362F26; --bcm-border-color-strong: #463C30; --bcm-surface-raised: #241F18; --bcm-surface-sunken: #1B1712; --bcm-link-color: var(--bcm-color-accent); } } /* Respect reduced-motion preference across every animation in the theme. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }