/* ========================================================================== The Sewing Birdie — design tokens -------------------------------------------------------------------------- Single source of truth for the design system. Every value comes from the token table in 01-shared-context.md §4, then Phase 1b pulled the neutrals back to the scheme the OWNER already runs on production, which is warmer than the mockups' palette. The production palette is recorded verbatim in this repo at assets/css/legacy/owner-custom-1.0.0.css (the retired 1.0.0 stylesheet), so these values are copied from real production tokens rather than invented: page #FAF8F5 · surface #FFFFFF · text #2D2A26 · muted #6B6560 accent #C17F59 · accent hover #A86D4A · accent soft #E8D5CC · border #E8E4DF Phase 1 shipped the mockups' palette (ink #22201D, page #FFFFFF). Phase 1b changes the neutrals only. The terracotta accent stays: the mockups' berry #7A3B4E is shipped nowhere. PAGE vs SURFACE. Production's page background is the warm #FAF8F5 and its cards, header and panels are #FFFFFF. Phase 1 used #FFFFFF for both roles, so --sb-bg doubled as "white". They are separate tokens now: --sb-bg is the page and --sb-surface is white, and --sb-surface is also the colour white text sits on (it must NOT be --sb-bg, or white text would drop to 4.31:1 on the announcement bar). ACCENT AND WHITE TEXT. White on the brand terracotta #C17F59 measures 3.26:1, below the 4.5:1 the same document requires, so the surfaces that carry white text use darker shades of the SAME hue, derived in Phase 1 and kept here: --sb-accent-strong #A8653F 4.57:1 vs #FFFFFF — announcement bar, buttons --sb-accent-hover #8F5730 5.88:1 vs #FFFFFF — their hover/active --sb-accent itself stays the brand colour for decorative fills, borders, icons, chips and display-size text, where it carries ink (4.38:1). --sb-accent-dark (#A86D4A) is production's own darker shade. It is DECORATIVE ONLY — and that is a measured fact, not a preference: no text colour reaches 4.5:1 on it (white 4.24:1, ink 3.37:1), so it may never carry text. Use it for borders, icons and decoration. --sb-accent-tint (#E8D5CC) is production's soft accent (their newsletter block and chips) and carries ink at 10.08:1. Every ratio below is measured against the ACTUAL background it sits on (#FAF8F5 page, #FFFFFF surface, #F4EFE9 band) in reports/phase-1b-contrast.md — re-measured in Phase 1b because the page background changed from #FFFFFF to #FAF8F5, which moves every number that was taken against pure white. ========================================================================== */ :root { /* --- Colour ----------------------------------------------------------- */ --sb-ink: #2D2A26; /* text, dark buttons, dark bands — 13.47:1 on bg */ --sb-ink-2: #3D3A36; /* body copy — 10.67:1 on bg */ --sb-muted: #6B6560; /* labels, captions — 5.42:1 on bg, 5.74:1 on surface */ --sb-line: #E8E4DF; /* borders */ --sb-line-input: #CFC8BE; /* form-field borders (lower contrast, see report) */ --sb-bg: #FAF8F5; /* page background — production's warm off-white */ --sb-surface: #FFFFFF; /* cards, header, panels; and the white text colour */ --sb-soft: #F4EFE9; /* soft bands, footer, summaries */ --sb-chip: #EFE9E2; /* badges and chips */ --sb-photo: #EBE4DC; /* image placeholders and skeletons */ --sb-accent: #C17F59; /* brand accent (owner decision, Phase 1) */ --sb-accent-dark: #A86D4A; /* production's darker accent — decorative only */ --sb-accent-tint: #E8D5CC; /* production's soft accent (chips/tints) */ --sb-accent-strong: #A8653F;/* derived darker accent, carries white text */ --sb-accent-hover: #8F5730; /* derived darker still, hover/active */ --sb-success: #3F5B4A; /* success ticks — 7.06:1 on bg */ --sb-error-bg: #FBECEC; /* payment errors */ --sb-error-fg: #7A1F1F; /* --- Type ------------------------------------------------------------- */ --sb-font-display: 'Instrument Serif', 'Iowan Old Style', Georgia, serif; --sb-font-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --sb-size-h1: clamp(2.375rem, 3.6vw + 1.2rem, 4.5rem); /* 38 → 72px */ --sb-size-h2: clamp(1.875rem, 1.6vw + 1.1rem, 2.75rem); /* 30 → 44px */ --sb-size-h3: clamp(1.375rem, 1vw + 1rem, 1.75rem); /* 22 → 28px */ --sb-size-body: clamp(1rem, 0.93rem + 0.28vw, 1.0625rem);/* 16 → 17px */ --sb-size-small: 0.875rem; /* 14px */ --sb-size-caption: 0.8125rem; /* 13px */ --sb-size-eyebrow: 0.75rem; /* 12px */ --sb-leading-body: 1.55; --sb-leading-tight: 1.15; --sb-tracking-eyebrow: 0.12em; --sb-tracking-nav: 0.04em; /* --- Layout ----------------------------------------------------------- */ --sb-wrap: 1240px; --sb-wrap-checkout: 1100px; --sb-gutter: 24px; --sb-section: 96px; --sb-section-sm: 64px; /* --- Radius ----------------------------------------------------------- */ --sb-r-img: 4px; --sb-r-btn: 6px; --sb-r-band: 8px; --sb-r-chip: 999px; /* --- Wordmark lockup -------------------------------------------------- The owner's logo (media attachment 138) sits BEFORE the serif wordmark, scaled so its VISUAL height equals the wordmark's cap height and its baseline matches the text's. Instrument Serif's cap height is 0.74em (measured: canvas actualBoundingBoxAscent of "T" = 74px at 100px). The PNG is 371x250 and its opaque artwork occupies 220 of those 250 rows (measured from the tRNS alpha channel: rows 17-236), i.e. 0.88 of the image height, with the remainder transparent padding. So the image box must be 0.74em / 0.88 = 0.841em tall for the artwork inside it to be exactly cap height. --sb-wordmark-logo-nudge moves the image DOWN by the artwork's bottom transparent padding (13/250 of the box = 0.044em) so the artwork's bottom edge — not the invisible padding edge — lands on the text baseline. All three are em-relative, so the same token prices the 34px desktop wordmark (~28.6px logo), the mobile one and the 30px checkout one. ---------------------------------------------------------------------- */ --sb-wordmark-logo-h: 0.841em; --sb-wordmark-logo-gap: 0.24em; --sb-wordmark-logo-nudge: 0.044em; /* --- Misc ------------------------------------------------------------- */ --sb-tap: 44px; /* minimum touch target */ --sb-transition: 0.18s ease; --sb-shadow-panel: 0 18px 30px rgba(45, 42, 38, 0.08); } @media (max-width: 767px) { :root { --sb-gutter: 16px; --sb-section: var(--sb-section-sm); } } /* -------------------------------------------------------------------------- Mirror the palette into Kadence's own global palette, so that the editor swatches, Kadence Blocks and every Kadence-rendered element use the same colours. (PHP mirrors these into the Customizer records as well — see inc/tokens.php and tools/apply-kadence-settings.php.) HTML:root wins against Kadence's own ":root" rule regardless of load order. Slots follow the semantics Kadence already used on this site: 1 accent · 2 accent dark · 3 headings/dark · 4 body text · 5/6 muted · 7 light accent tint · 8 light band · 9 page background. palette7 is production's accent-tint (#E8D5CC — its accent-soft, the value behind production's newsletter block), which is what the owner expects to find in the "light accent" slot. palette2 stays on accent-strong rather than production's #A86D4A, because palette2 is a text background in Kadence's semantics and NOTHING reaches 4.5:1 on #A86D4A (white 4.24:1, ink 3.37:1). See --sb-accent-dark above. -------------------------------------------------------------------------- */ html:root { --global-palette1: var(--sb-accent); --global-palette2: var(--sb-accent-strong); --global-palette3: var(--sb-ink); --global-palette4: var(--sb-ink-2); --global-palette5: var(--sb-muted); --global-palette6: var(--sb-muted); --global-palette7: var(--sb-accent-tint); --global-palette8: var(--sb-soft); --global-palette9: var(--sb-bg); /* --- Kadence's own button palette --------------------------------------- Kadence's rules paint from these four variables and several of them outrank the child theme's button rules, so they are the real single point of control for ".alt" buttons and friends: .woocommerce a.button.alt, .woocommerce button.button.alt, … (0,3,1) — product Add to cart, the shortcode cart's checkout button, My Account, order-received; button, .button, .wp-block-button__link, .wp-element-button, … (0,1,0) — the generic button rule; .pagination .current the blog index's "current page" badge (Kadence core, content.min.css); .select2-… .select2-results__option--highlighted[aria-selected] the highlighted row of the checkout country/state dropdown. Kadence shipped the RAW brand accent here (#C17F59) behind white text — the 3.26:1 QA found on the product page — with a #A8653F hover. Pointing the variables at the tokens that actually carry white text repairs that whole class of surfaces at once, site-wide, instead of restating each selector in the child theme and waiting for the next one to appear: --sb-accent-strong #A8653F 4.57:1 behind #FFFFFF --sb-accent-hover #8F5730 5.88:1 behind #FFFFFF --global-palette-btn / -hover were already #FFFFFF; mapping them to --sb-surface keeps white text on the accent explicit rather than incidental (they are also used as text ON Kadence's .woocommerce-store-notice). `!important` is deliberately not used: html:root out-specifies Kadence's own `:root` block, so these win on cascade order alone. ---------------------------------------------------------------------- */ --global-palette-btn-bg: var(--sb-accent-strong); --global-palette-btn: var(--sb-surface); --global-palette-btn-bg-hover: var(--sb-accent-hover); --global-palette-btn-hover: var(--sb-surface); /* Typography: Instrument Serif display + DM Sans text, self-hosted. */ --global-body-font-family: var(--sb-font-body); --global-heading-font-family: var(--sb-font-display); --global-display-fallback-font: sans-serif; --global-fallback-font: sans-serif; --global-primary-nav-font-family: var(--sb-font-body); } /* Text colour that sits ON each palette background. */ html:root { --global-palette1-text: var(--sb-ink); /* ink on terracotta = 4.38:1 */ --global-palette2-text: var(--sb-surface);/* white on accent-strong = 4.57:1 */ --global-palette3-text: var(--sb-surface); --global-palette4-text: var(--sb-surface); --global-palette5-text: var(--sb-surface); --global-palette6-text: var(--sb-surface); --global-palette7-text: var(--sb-ink); /* ink on accent-tint = 10.08:1 */ --global-palette8-text: var(--sb-ink); --global-palette9-text: var(--sb-ink); }