/* =========================================================================
TOKENS - the only place a colour, type size, space, radius, shadow, font or
duration is defined in this theme. Ported value for value from the house
Astro template (~/websites/client-site-template/src/styles/global.css) so a
client on WordPress and a client on Astro are the same site with the same
numbers. Components consume these; nothing carries a raw hex.
theme.json points its presets at these same variables, so the block editor,
the WooCommerce block cart/checkout and wp-admin inherit them rather than
holding a second copy.
========================================================================= */
:root {
/* ---- Fonts. Self-hosted in assets/fonts/ and declared in fonts.css, or
loaded from the client's licensed kit. Never a Google Fonts : the
file has to be on the client's own cPanel. The display face is never a
system-default grotesk (Inter, Space Grotesk, Poppins, Montserrat,
Roboto, Open Sans); pick the pair from the house type roster and write
the one-line reason in DESIGN.md. ---- */
--font-heading: 'Big Shoulders Display', 'Arial Narrow', ui-sans-serif, sans-serif;
--font-body: 'Archivo', ui-sans-serif, system-ui, sans-serif;
/* Mono is a real slot, not an afterthought: every price, SKU, spec row,
order number, quantity and measured figure is set in it with tabular-nums.
On a shop that is a lot of the page, so choose it properly. */
--font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
/* ---- Colour ladders. Generated from the client logo by
`node ~/websites/logo2theme.mjs --out assets/css/tokens.css`,
which rewrites everything between the markers. Do not hand-edit inside
them. Neutral: 1-2 backgrounds, 3-5 interactive surfaces, 6-8 borders,
9-10 solid fills, 11-12 text. Accent: 9 solid button / ring, 11 accent
text on step 1 (>= 4.5:1), 12 accent on a tint (>= 7:1). ---- */
/* logo2theme:start */
/* seed oklch(0.423 0.081 52.4) from refs/r1-pack.jpg; step 9 on white 7.74:1 */
--color-neutral-1: oklch(0.985 0.006 27.0);
--color-neutral-2: oklch(0.968 0.008 27.0);
--color-neutral-3: oklch(0.945 0.009 27.0);
--color-neutral-4: oklch(0.918 0.009 27.0);
--color-neutral-5: oklch(0.888 0.009 27.0);
--color-neutral-6: oklch(0.855 0.009 27.0);
--color-neutral-7: oklch(0.800 0.009 27.0);
--color-neutral-8: oklch(0.700 0.010 27.0);
--color-neutral-9: oklch(0.580 0.011 27.0);
--color-neutral-10: oklch(0.500 0.012 27.0);
--color-neutral-11: oklch(0.440 0.012 27.0);
--color-neutral-12: oklch(0.205 0.014 27.0);
--color-accent-1: oklch(0.990 0.005 27.0);
--color-accent-2: oklch(0.975 0.012 27.0);
--color-accent-3: oklch(0.950 0.025 27.0);
--color-accent-4: oklch(0.915 0.036 27.0);
--color-accent-5: oklch(0.875 0.048 27.0);
--color-accent-6: oklch(0.830 0.059 27.0);
--color-accent-7: oklch(0.785 0.070 27.0);
--color-accent-8: oklch(0.735 0.077 27.0);
--color-accent-9: oklch(0.450 0.081 27.0);
--color-accent-10: oklch(0.390 0.077 27.0);
--color-accent-11: oklch(0.330 0.066 27.0);
--color-accent-12: oklch(0.250 0.044 27.0);
/* logo2theme:end */
/* ---- Semantic roles. Every component reads these, never a ladder step
directly, which is what lets the dark block below flip the whole site by
re-pointing twelve variables. ---- */
--color-bg: var(--color-neutral-1);
--color-bg-raised: var(--color-neutral-2);
--color-surface: var(--color-neutral-3);
--color-line: var(--color-neutral-6);
--color-line-strong: var(--color-neutral-8);
--color-text: var(--color-neutral-12);
--color-text-muted: var(--color-neutral-11);
--color-on-accent: var(--color-neutral-1);
/* Buttons are ink; the accent stays a hairline, a ring, a price or a
highlight. The one exception is add-to-cart, which is the accent, because
on a shop the accent's job is to mark the buying action. */
--color-btn: var(--color-neutral-12);
--color-btn-text: var(--color-neutral-1);
--color-btn-hover: oklch(0.3 0.012 70);
--color-sale: var(--color-accent-11);
--color-instock: oklch(0.52 0.13 150);
--color-error: oklch(0.55 0.2 27);
/* ---- Radius: one value, every size derived from it. Chosen for the
subject (machined metal wants 0.25rem, soft goods want 1rem), never
inherited. ---- */
--radius: 0.25rem; /* heat-sealed foil and a butcher bench, not a soft good */
--radius-sm: calc(var(--radius) * 0.5);
--radius-md: calc(var(--radius) * 0.75);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) * 1.5);
/* ---- Shadows: cards use shadow, not border. The dark block below
re-authors both, because shipping the light-ground values on a dark site
is why cards look flat there. ---- */
--shadow-card: 0 1px 2px oklch(0.2 0.012 70 / 0.05), 0 12px 32px -12px oklch(0.2 0.012 70 / 0.14);
--shadow-card-hover: 0 2px 4px oklch(0.2 0.012 70 / 0.06), 0 20px 40px -12px oklch(0.2 0.012 70 / 0.2);
/* ---- Fluid type scale (Utopia: 16px@360 to 18px@1440, ratio 1.2 to 1.25) ---- */
--text-n2: clamp(0.694rem, 0.686rem + 0.038vw, 0.72rem);
--text-n1: clamp(0.833rem, 0.811rem + 0.099vw, 0.9rem);
--text-0: clamp(1rem, 0.958rem + 0.185vw, 1.125rem);
--text-1: clamp(1.2rem, 1.131rem + 0.306vw, 1.406rem);
--text-2: clamp(1.44rem, 1.334rem + 0.471vw, 1.758rem);
--text-3: clamp(1.728rem, 1.572rem + 0.695vw, 2.197rem);
/* Steps 4-6 are held back at the mobile end on purpose: the unretuned ladder
packs 33 / 40 / 48px into three steps at 390, too close to read as a
hierarchy and too large next to the H1. Retune per site alongside the
display floor and put the arithmetic in DESIGN.md. */
--text-4: clamp(1.9rem, 1.586rem + 1.29vw, 2.747rem);
--text-5: clamp(2.1rem, 1.605rem + 2.032vw, 3.433rem);
--text-6: clamp(2.4rem, 1.806rem + 2.438vw, 4rem);
/* Display: hero H1 and one set-piece word or numeral per page. The floor is
3.5rem and it is a floor to RAISE, not a number to inherit: at 390 the H1
must be at least 1.5x the section H2 or the hierarchy inverts. A timid
hero is the single most common way a build misses the bar. */
--text-display: clamp(4.25rem, 2.455rem + 7.365vw, 9.5rem);
--lh-tight: 1.05;
--lh-heading: 1.15;
--lh-body: 1.6;
--track-display: -0.015em;
--track-tight: -0.01em;
/* ---- Fluid spacing (section rhythm). Sections run 96-128 desktop /
48-64 mobile: compact, never gappy. ---- */
--space-3xs: clamp(0.25rem, 0.229rem + 0.093vw, 0.313rem);
--space-2xs: clamp(0.5rem, 0.479rem + 0.093vw, 0.563rem);
--space-xs: clamp(0.75rem, 0.708rem + 0.185vw, 0.875rem);
--space-s: clamp(1rem, 0.958rem + 0.185vw, 1.125rem);
--space-m: clamp(1.5rem, 1.438rem + 0.278vw, 1.688rem);
--space-l: clamp(2rem, 1.917rem + 0.37vw, 2.25rem);
--space-xl: clamp(3rem, 2.875rem + 0.556vw, 3.375rem);
--space-2xl: clamp(4rem, 3.833rem + 0.741vw, 4.5rem);
--space-3xl: clamp(6rem, 5.75rem + 1.111vw, 6.75rem);
--space-4xl: clamp(8rem, 7.667rem + 1.481vw, 9rem);
--section-y: clamp(3rem, 2rem + 5vw, 8rem);
--container-site: 82rem;
--container-prose: 65ch;
--nav-h: 72px;
/* ---- Motion: three duration ladders, one easing pair.
ui 200ms, cap 300: buttons, menus, accordion, sheet, hover, qty
reveal 500ms, cap 700: scroll-in of sections, images, staggered words
hero 900ms, cap 700 per tween and 1200 for the whole sequence
ease-out for anything entering or settling; ease-in-out for masks and
on-screen moves only. "Cinematic" is choreography, never long durations. */
--dur-ui: 200ms;
--dur-reveal: 500ms;
--dur-hero: 900ms;
--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}
/* =========================================================================
DARK GROUND. One ground is committed per site and held end to end, checkout
included: trade, automotive, luxury, interiors and anything the client calls
premium are dark by default; light only when the brand or niche demands it
(clinic, accounting). No section anywhere flips to the opposite plate.
To commit dark: set the ground to "dark" in Appearance > Customize > House
(it stamps data-ground on ), then INVERT the neutral ladder about the
logo hue below - step 1 becomes the deep ground and step 12 the near-white,
with the same hue and the chroma re-checked at both ends. Author it here by
hand; it is a palette decision, not a reversal of numbers, and logo2theme
owns the light ladder above. Leave the accent ladder alone unless the accent
fails 4.5:1 on the new step 1.
The values below are a working dark ladder in the template's default hue,
there so a fresh clone previews as a dark site rather than as a wall of
white. Replace them from the client's logo.
========================================================================= */
html[data-ground='dark'] {
/* THE GROUND. Inverted about the brand hue 27 (the crimson #bf0413 the live
site already uses), step 1 the deep ground and step 12 the near-white.
Chroma stays low on the neutrals so the page reads as charcoal rather than
maroon; the red is allowed to be red only where it means something.
Contrast measured against step 1, not estimated:
neutral-11 10.14:1 neutral-12 17.39:1
accent-11 7.12:1 accent-12 10.55:1
neutral-12 on accent-9 (the buy button) 4.73:1
white on accent-9 5.16:1 */
--color-neutral-1: oklch(0.175 0.008 27);
--color-neutral-2: oklch(0.210 0.009 27);
--color-neutral-3: oklch(0.245 0.010 27);
--color-neutral-4: oklch(0.280 0.011 27);
--color-neutral-5: oklch(0.315 0.012 27);
--color-neutral-6: oklch(0.355 0.012 27);
--color-neutral-7: oklch(0.415 0.012 27);
--color-neutral-8: oklch(0.495 0.012 27);
--color-neutral-9: oklch(0.615 0.011 27);
--color-neutral-10: oklch(0.700 0.010 27);
--color-neutral-11: oklch(0.800 0.008 27);
--color-neutral-12: oklch(0.970 0.004 27);
/* The accent is the brand crimson, lifted just enough to hold its own on a
near-black plate. Its job on this site: add-to-cart, the price on sale,
the highlighted words of a heading, the hairline under an active nav item.
Nothing else, or the page turns into a warning label. */
--color-accent-9: oklch(0.560 0.205 27);
--color-accent-10: oklch(0.505 0.200 27);
--color-accent-11: oklch(0.720 0.170 27);
--color-accent-12: oklch(0.825 0.125 27);
--color-btn: var(--color-neutral-12);
--color-btn-text: var(--color-neutral-1);
--color-btn-hover: oklch(0.880 0.006 27);
--color-on-accent: oklch(0.970 0.004 27);
--color-instock: oklch(0.780 0.150 150);
--color-sale: var(--color-accent-11);
/* On a dark ground the card is LIGHTER than the page, so the shadow becomes
a true black cast plus a 1px inset top rim. */
--shadow-card: 0 1px 0 oklch(1 0 0 / 0.05) inset, 0 2px 4px oklch(0 0 0 / 0.45), 0 16px 40px -16px oklch(0 0 0 / 0.6);
--shadow-card-hover: 0 1px 0 oklch(1 0 0 / 0.08) inset, 0 4px 8px oklch(0 0 0 / 0.5), 0 24px 48px -16px oklch(0 0 0 / 0.7);
}