/** * Fischer Bell — design token bridge. * * The Claude Design system names its tokens `--fb-green`, `--space-4`, `--text-h2` and so on. * theme.json is the single source of truth for those values, so every token here is an alias * onto the `--wp--preset--*` / `--wp--custom--*` variable WordPress generates from theme.json. * * Practical upshot: when a maintainer changes a colour in Appearance > Editor > Styles, every * component follows. Never hardcode a hex value below — change theme.json instead. */ :root { /* ---- Brand ---- */ --fb-green: var(--wp--preset--color--fb-green); --fb-green-600: var(--wp--preset--color--fb-green-600); --fb-green-700: var(--wp--preset--color--fb-green-700); --fb-green-200: var(--wp--preset--color--fb-green-200); --fb-green-100: var(--wp--preset--color--fb-green-100); --fb-ink: var(--wp--preset--color--fb-ink); /* ---- Neutral steel ramp ---- */ --steel-000: var(--wp--preset--color--steel-000); --steel-025: var(--wp--preset--color--steel-025); --steel-050: var(--wp--preset--color--steel-050); --steel-100: var(--wp--preset--color--steel-100); --steel-200: var(--wp--preset--color--steel-200); --steel-300: var(--wp--preset--color--steel-300); --steel-400: var(--wp--preset--color--steel-400); --steel-500: var(--wp--preset--color--steel-500); --steel-600: var(--wp--preset--color--steel-600); --steel-700: var(--wp--preset--color--steel-700); --steel-800: var(--wp--preset--color--steel-800); --steel-900: var(--wp--preset--color--steel-900); /* ---- Semantic / status ---- */ --status-success: var(--wp--preset--color--status-success); --status-success-bg: var(--wp--custom--status-bg--success); --status-warning: var(--wp--preset--color--status-warning); --status-warning-bg: var(--wp--custom--status-bg--warning); --status-danger: var(--wp--preset--color--status-danger); --status-danger-bg: var(--wp--custom--status-bg--danger); --status-info: var(--wp--preset--color--status-info); --status-info-bg: var(--wp--custom--status-bg--info); /* ---- Semantic aliases ---- */ --text-primary: var(--fb-ink); --text-secondary: var(--steel-600); --text-muted: var(--steel-500); --text-inverse: var(--steel-000); --text-link: var(--wp--custom--text--link); --text-link-hover: var(--wp--custom--text--link-hover); --surface-page: var(--steel-000); --surface-subtle: var(--steel-050); --surface-card: var(--steel-000); --surface-sunken: var(--steel-100); --surface-inverse: var(--fb-ink); --surface-accent: var(--fb-green); --surface-accent-soft: var(--fb-green-100); --border-subtle: var(--steel-100); --border-default: var(--steel-200); --border-strong: var(--steel-300); --border-inverse: rgba(255, 255, 255, 0.16); --border-focus: var(--fb-ink); /* Two conversion paths, deliberately non-competing: dark = cart, green = quote. */ --cta-cart-bg: var(--fb-ink); --cta-cart-fg: var(--steel-000); --cta-quote-bg: var(--fb-green); --cta-quote-fg: var(--fb-ink); --focus-ring: 0 0 0 2px var(--steel-000), 0 0 0 4px var(--fb-ink); /* ---- Typography ---- */ --font-display: var(--wp--preset--font-family--display); --font-body: var(--wp--preset--font-family--body); --font-mono: var(--wp--preset--font-family--mono); --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 900; --text-display-1: var(--wp--preset--font-size--display-1); --text-display-2: var(--wp--preset--font-size--display-2); --text-h1: var(--wp--preset--font-size--h-1); --text-h2: var(--wp--preset--font-size--h-2); --text-h3: var(--wp--preset--font-size--h-3); --text-h4: var(--wp--preset--font-size--h-4); --text-body-lg: var(--wp--preset--font-size--body-lg); --text-body: var(--wp--preset--font-size--body); --text-body-sm: var(--wp--preset--font-size--body-sm); --text-caption: var(--wp--preset--font-size--caption); --text-micro: var(--wp--preset--font-size--micro); /* * WordPress ships four font-size presets of its own (Small / Medium / Large / X-Large) and * `typography.defaultFontSizes: false` does NOT remove them — they are still emitted, and * their `.has-*-font-size` classes carry `!important`. Anything authored with them therefore * lands outside the design scale and outranks the theme's own typography. * * Redefining the presets here snaps them onto the nearest step of the kit's scale, so a block * set to "Medium" in the editor still produces design-system type instead of an arbitrary size. */ --wp--preset--font-size--small: var(--wp--preset--font-size--caption); --wp--preset--font-size--medium: var(--wp--preset--font-size--body-lg); --wp--preset--font-size--large: var(--wp--preset--font-size--h-1); --wp--preset--font-size--x-large: var(--wp--preset--font-size--display-2); --lh-tight: var(--wp--custom--line-height--tight); --lh-snug: var(--wp--custom--line-height--snug); --lh-normal: var(--wp--custom--line-height--normal); --lh-relaxed: var(--wp--custom--line-height--relaxed); --ls-display: var(--wp--custom--letter-spacing--display); --ls-heading: var(--wp--custom--letter-spacing--heading); --ls-body: var(--wp--custom--letter-spacing--body); --ls-eyebrow: var(--wp--custom--letter-spacing--eyebrow); --ls-button: var(--wp--custom--letter-spacing--button); /* ---- Spacing & shape ---- */ --space-1: var(--wp--preset--spacing--10); --space-2: var(--wp--preset--spacing--20); --space-3: var(--wp--preset--spacing--30); --space-4: var(--wp--preset--spacing--40); --space-5: var(--wp--preset--spacing--50); --space-6: var(--wp--preset--spacing--60); --space-8: var(--wp--preset--spacing--70); --space-10: var(--wp--preset--spacing--80); --space-12: var(--wp--preset--spacing--90); --space-16: var(--wp--preset--spacing--100); --space-20: var(--wp--preset--spacing--110); --space-24: var(--wp--preset--spacing--120); --space-32: 128px; --radius-none: var(--wp--custom--radius--none); --radius-sm: var(--wp--custom--radius--sm); --radius-md: var(--wp--custom--radius--md); --radius-lg: var(--wp--custom--radius--lg); --radius-mark: var(--wp--custom--radius--mark); --radius-pill: var(--wp--custom--radius--pill); --border-width: var(--wp--custom--border-width--default); --border-width-strong: var(--wp--custom--border-width--strong); /* * Sticky offset — how far below the top a sticky element must sit to clear the header. * * `.fb-header` is `position: sticky; top: 0` and stacks three parts: the top bar (36px), the * masthead (76px) and the primary nav (24px padding + ~21px text + a 1px border) = **158px**. * 160 leaves two pixels of clearance, because being two pixels low is invisible and being ten * pixels high clips the first row of whatever is sticking (responsive audit R-5). * * Before this there were two hand-written values — 150px on the catalogue sidebar and 140px on * the quote summary — both commented as clearing the same header, so at least one was wrong. * ⚠️ The 158px figure is computed from the CSS, not measured in a browser. Worth one look. */ --sticky-offset: var(--wp--custom--sticky-offset); /* * Breakpoints, declared here so there is one place to read them — CSS cannot use a custom * property inside a media query, so these are documentation with a value, not something the * queries can reference (responsive audit R-3). * * sm 600px phone -> small tablet: the product grid stops using the phone card floor * md 860px tablet -> desktop: header, catalogue sidebar and grid all switch * lg 1152px the width at which the catalogue reaches three full-size columns * xl 1280px --container-max; nothing grows past this * * Not yet migrated, and each is deliberate until someone checks it: 480 and 520 (card actions, * carousel), 640 (recommender, booking, enquiry), 720 (quote table reflow), 900 (service and * contact two-column), 1024 (quote two-panel), 1100 (carousel slides). */ --bp-sm: var(--wp--custom--breakpoint--sm); --bp-md: var(--wp--custom--breakpoint--md); --bp-lg: var(--wp--custom--breakpoint--lg); --bp-xl: var(--wp--custom--breakpoint--xl); --container-max: var(--wp--custom--container--max); --container-narrow: var(--wp--custom--container--narrow); --gutter: var(--wp--custom--gutter); /* Comfortable line length for long-form prose. Applied as a cap on the text itself, never as a container, so copy stays flush with the page edge instead of drifting inward. */ --measure: 68ch; --control-h-sm: var(--wp--custom--control-h--sm); --control-h-md: var(--wp--custom--control-h--md); --control-h-lg: var(--wp--custom--control-h--lg); --tap-min: var(--wp--custom--tap-min); /* ---- Elevation ---- */ --shadow-none: none; --shadow-xs: var(--wp--preset--shadow--xs); --shadow-sm: var(--wp--preset--shadow--sm); --shadow-md: var(--wp--preset--shadow--md); --shadow-lg: var(--wp--preset--shadow--lg); --shadow-sticky: var(--wp--preset--shadow--sticky); --shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.08); --scrim-image: var(--wp--custom--scrim--image); --scrim-hero: var(--wp--custom--scrim--hero); /* ---- Motion ---- */ --dur-instant: var(--wp--custom--duration--instant); --dur-fast: var(--wp--custom--duration--fast); --dur-base: var(--wp--custom--duration--base); --dur-slow: var(--wp--custom--duration--slow); --ease-standard: var(--wp--custom--ease--standard); --ease-out: var(--wp--custom--ease--out); --ease-in-out: var(--wp--custom--ease--in-out); --transition-control: background-color var(--dur-fast) linear, border-color var(--dur-fast) linear, color var(--dur-fast) linear; --transition-surface: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); --press-scale: var(--wp--custom--press-scale); } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --press-scale: 1; } }