/* ==========================================================================
meridian — "Clinical Minimalism" brand layer over modern-retail.
Ported from the Google Stitch export
(docs/templates/pending/stitch_23_meridian_e_commerce_store — the
meridian_horology/DESIGN.md "Clinical Minimalism" system is the
design-system source): a warm porcelain canvas, near-black ink for all
primary text/UI, a deep oxblood accent used sparingly as TEXT/keylines
(never as a large fill on its own — see the contrast note below), hairline
neutral dividers, ZERO shadows/gradients and perfectly sharp (0px) corners
everywhere, no exceptions.
This stylesheet has two jobs:
(a) style meridian's OWN sections (md-* — featured/journal header rows,
the movement-story band, the ink category band, the newsletter
band); and
(b) restyle the INHERITED `mr-*` surfaces — chiefly by re-pointing the
base neutral tokens at the porcelain/ink palette, flattening every
radius and shadow, and drawing the hairline/ink keyline structure.
This is the only reason shop / PDP / cart / checkout / account /
blog pick up the new palette without a single page override.
Everything is scoped under `body.md-theme` and reads the 5 customizer
tokens (--bs-primary, --bs-primary-rgb, --ll-accent, --ll-font-headings,
--ll-font-body, --ll-btn-radius) with theme.json-default fallbacks, so the
customizer + live preview keep working: change the primary colour and
every ink surface follows.
Contrast note (App\Support\Theming\ContrastChecker, scratchpad script,
never committed — ratios measured, not assumed):
- ink #191b1e on porcelain #faf9f6 = 16.39:1
- ink #191b1e on porcelain-band #f2f2ef = 15.39:1
- white #ffffff on ink #191b1e (button fill) = 17.26:1
- oxblood #7d2a2a AS TEXT on porcelain #faf9f6 = 8.92:1 (safe)
- white #ffffff on oxblood #7d2a2a (fill) = 9.39:1 (safe)
- DESIGN.md "secondary" #5d5f5d on porcelain = 6.12:1 (used for
--mr-soft instead of the YAML "outline" #76777b, which only measures
4.25:1 — below WCAG AA 4.5:1 for normal text on the pagination/
breadcrumb-sized copy that reads this token)
- oxblood #7d2a2a AS TEXT on ink #191b1e = 1.84:1 (FAILS) — so
oxblood is used as a TEXT/border colour ONLY on the porcelain canvas.
Anywhere the canvas flips to ink (the category band, the footer), any
accent moment uses an oxblood FILL with white text (9.39:1) instead —
never oxblood text on ink.
========================================================================== */
body.md-theme {
/* Customizer-driven brand tokens (fallbacks match theme.json defaults).
--md-oxblood tracks accent_color (like every sibling theme's own
accent var, e.g. zaree's --zr-gold: var(--ll-accent, ...)) so the
customizer stays meaningful; the contrast ratios in the file header
are measured against the THEME DEFAULT accent value that ships in the
demo, same exposure every other theme's accent-as-text usage has. */
--md-oxblood: var(--ll-accent, #7d2a2a);
--md-font-head: var(--ll-font-headings, "Albert Sans"), system-ui, -apple-system, sans-serif;
--md-font-body: var(--ll-font-body, "Inter"), system-ui, -apple-system, sans-serif;
/* Clinical Minimalism palette (meridian_horology/DESIGN.md). --md-ink is
a FIXED LITERAL, never bound to --bs-primary — body text must stay
near-black even if a merchant later customises primary_color to
something else (every sibling theme keeps ink/canvas literals for the
same reason; only "accent" tracks the customizer). */
--md-porcelain: #faf9f6; /* surface / background (DESIGN.md YAML + rendered body bg) */
--md-porcelain-band: #f2f2ef; /* DESIGN.md prose "Porcelain" hex — used for quiet bands */
--md-white: #ffffff; /* surface-container-lowest — card media wells */
--md-fill: #e8e8e5; /* surface-container-high — placeholders */
--md-ink: #191b1e; /* on-surface — primary text/UI */
--md-muted: #45474a; /* on-surface-variant */
--md-soft: #5d5f5d; /* DESIGN.md "secondary" — see contrast note above */
--md-hairline: #d1d1ce; /* Hairline Neutral — decorative 1px dividers */
/* Re-point the inherited base neutrals at the porcelain/ink palette so
every inherited mr-* surface (bands, borders, fills, muted text)
follows across shop/PDP/cart/checkout/account/blog. */
--mr-ink: var(--md-ink);
--mr-muted: var(--md-muted);
--mr-soft: var(--md-soft);
--mr-surface: var(--md-porcelain);
--mr-band: var(--md-porcelain-band);
--mr-band-alt: var(--md-porcelain-band);
--mr-fill: var(--md-fill);
--mr-border: var(--md-hairline);
--mr-border-strong: var(--md-ink);
--mr-radius: 0;
--mr-gold: var(--md-oxblood);
--mr-shadow: none;
/* Bootstrap paints bare via rgba(var(--bs-link-color-rgb),1) —
theme-vars sets the hex --bs-link-color but never the -rgb triplet, so
without this a bare (no .mr-* class) renders factory blue even
though --bs-link-color is correctly ink. Alias to the already-computed
--bs-primary-rgb so it tracks the customizer. */
--bs-link-color-rgb: var(--bs-primary-rgb);
background-color: var(--md-porcelain);
color: var(--md-ink);
font-family: var(--md-font-body);
font-size: 16px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
/* --------------------------------------------------------------------------
Shape discipline — DESIGN.md: "Every UI component, image container, and
button must have 90-degree corners. No exceptions are made for mobile or
interactive elements." Zero shadows/gradients too (depth = tonal layering
+ hairline keylines only).
-------------------------------------------------------------------------- */
body.md-theme .mr-card,
body.md-theme .mr-card__media,
body.md-theme .mr-btn,
body.md-theme .mr-promo,
body.md-theme .mr-promo__img,
body.md-theme .mr-icon-btn,
body.md-theme .mr-tile,
body.md-theme .mr-article__media,
body.md-theme .form-control,
body.md-theme .form-select,
body.md-theme .dropdown-menu,
body.md-theme .offcanvas,
body.md-theme img,
body.md-theme input,
body.md-theme select,
body.md-theme textarea,
body.md-theme button {
border-radius: 0 !important;
box-shadow: none !important;
}
/* The two round overlay controls on the product card (wishlist heart, quick
view eye) are EXEMPT from the flatten above. `.mr-card__wish` renders as a