/* * Oxa design tokens — the single source of truth for colour, type, space and shape. * * The values here are eflow's audited production values, reimplemented natively: * none of eflow's CSS is copied in, only the numbers it resolves to. Anything * that disagreed with eflow (a blue accent, a rose accent, rounded corners) has * been corrected rather than left to whichever file loaded last. * * Mirrors theme.json so components written in plain CSS use the same variables * Gutenberg uses on the editor side. The storefront's --bp-* layer, declared in * bp-header.css and bp-footer.css, now resolves *through* these tokens instead of * carrying its own near-miss copies — so a colour is changed here and nowhere else. */ :root { /* ---------- Colour: surfaces ---------- */ --oxa-bg: #ffffff; --oxa-surface: #f7f7f8; --oxa-border: #e6e6ea; /* ---------- Colour: ink ---------- * Body copy and headings are deliberately different weights of near-black: * eflow sets copy at #43454b and takes headings a shade darker. */ --oxa-text: #43454b; /* body copy */ --oxa-heading: #131315; /* h1–h6 */ --oxa-muted: #6b7280; /* ---------- Colour: brand ---------- * Carnival AL: the values eflow's Customizer had (accent_color, * accent_color_hover, link_color, info_color). */ --oxa-accent: #aacae4; --oxa-accent-hover: #5da8e2; --oxa-link: #354c49; --oxa-info: #fdd00a; --oxa-primary: #111111; --oxa-on-primary: #ffffff; /* ---------- Colour: state ---------- */ --oxa-success: #63be6a; /* buy-now button (Carnival AL eflow success_color) */ --oxa-error: #d61d54; /* out of stock (Carnival AL eflow error_color) */ --oxa-in-stock: #109663; /* "in stock" copy */ --oxa-sale-price: red; /* the CSS keyword, as eflow spells it */ /* ---------- Colour: chrome ---------- * Header and footer read from these. The Appearance → Header and * Appearance → Footer panels can still override the --bp-* vars per site; * these are what an unconfigured install resolves to. */ --oxa-header-bg: #ffffff; /* The header container's own text colour. NOT the menu links — those are body * ink (--oxa-text), which is what the reference renders them as. Wiring the * nav to this token washed the menu out. */ --oxa-header-fg: #9aa0a7; --oxa-footer-bg: #fafafa; --oxa-footer-border: #f5f5f5; /* ---------- Type: family ---------- * The full fallback stack, so a failed webfont degrades through the * Helvetica/Arial chain rather than straight to the browser's generic sans. * The webfont itself is enqueued in inc/enqueue.php with preconnect — not * @import-ed from inside a stylesheet, which is render-blocking and makes the * font depend on one particular file being loaded. */ --oxa-font-sans: Montserrat, HelveticaNeue-Light, "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; --oxa-font-mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace; /* ---------- Type: weight ---------- * Every weight named here is one of the six actually loaded (300–800). A * weight that is not loaded renders as the nearest one that is, silently — * which is how 300 headings previously came out looking like 400. */ --oxa-fw-heading: 300; --oxa-fw-body: 400; --oxa-fw-medium: 500; /* sale price */ --oxa-fw-bold: 600; /* strong / b */ /* ---------- Type: line height ---------- */ --oxa-lh: 1.618; --oxa-lh-heading: 1.15; /* ---------- Type: scale ---------- * Kept fluid rather than pinned to eflow's px values. eflow's h3 (25.9px) is * larger than its h2 (22.4px) — real, not a typo, but an inversion worth not * reproducing. If visual QA shows a mismatch, override per-component instead * of flattening this scale. */ --oxa-fs-xs: 0.8125rem; --oxa-fs-sm: 0.9375rem; --oxa-fs-md: 1.0625rem; --oxa-fs-lg: 1.25rem; --oxa-fs-xl: 1.5rem; --oxa-fs-2xl: 2rem; --oxa-fs-3xl: clamp(2.25rem, 4vw, 3.25rem); --oxa-fs-4xl: clamp(2.75rem, 5vw, 4.5rem); /* Prices are the one place eflow's exact sizes matter, because they sit next * to each other in a grid and a half-pixel shows. */ --oxa-fs-price-pdp: 22.7px; --oxa-fs-price-loop: 14px; --oxa-fs-price-loop-md: 18px; /* from 768px up */ /* ---------- Spacing ---------- */ --oxa-space-1: 0.5rem; --oxa-space-2: 0.75rem; --oxa-space-3: 1rem; --oxa-space-4: 1.5rem; --oxa-space-5: 2.25rem; --oxa-space-6: 3.5rem; --oxa-space-7: 5rem; --oxa-space-8: 7rem; /* ---------- Layout ---------- */ --oxa-content-width: 768px; --oxa-wide-width: 1200px; /* ---------- Shape ---------- * eflow squares everything off: buttons, inputs, product images, size * swatches all resolve to 0. The three tokens below were 10px / 6px / 16px, * which is where Oxa's rounded look came from. * * --oxa-radius-pill is separate and deliberate: it is the only rounded shape * left, used by the header icon buttons and the cart badge. Set it to 0 to * square those too — that is a live design decision, not an oversight. */ /* Carnival AL: eflow's border_radius was 0.5rem. */ --oxa-radius: 0.5rem; --oxa-radius-sm: 0.5rem; --oxa-radius-lg: 0.5rem; --oxa-radius-pill: 9999px; /* ---------- Motion ---------- */ --oxa-ease: cubic-bezier(.2, .8, .2, 1); --oxa-dur: 180ms; } /* * Dark mode — DISABLED, deliberately. * * This block used to redefine all eight colour tokens under * prefers-color-scheme: dark. The --bp-* layer that styles the header, footer, * shop grid, product page and cart has no dark palette at all, so the result was * a split page: components flipped to #0b0c0f while every surface a customer * buys through stayed white. eflow is a fixed light design and has no dark mode * to match, so the coherent state is one palette. * * To bring dark mode back, the --bp-* layer needs its own dark values first — * uncommenting this alone reintroduces the split. */ /* @media (prefers-color-scheme: dark) { :root:not([data-oxa-theme="light"]) { --oxa-bg: #0b0c0f; --oxa-surface: #14161b; --oxa-border: #232730; --oxa-muted: #9aa3af; --oxa-text: #f1f3f5; --oxa-heading: #ffffff; --oxa-primary: #f5f5f5; --oxa-on-primary: #0b0c0f; --oxa-accent: #ffffff; } } */