/* ============================================================ * IbdaaHost Cart — token bridge (child of Nexus Cart) * Feature 003-storefront-theme, task T012, contract C2. * ============================================================ * * The Nexus Cart renders inside a SHADOW DOM and is themed * entirely through --vl-* custom properties. Two measured facts * make this file load-bearing rather than cosmetic: * * * nexus_cart/css/style.min.css reads --vl-* 130 times and * declares NONE of them, with ZERO var(--vl-x, fallback) * forms. Every value has to arrive from a stylesheet like * this one. * * This file overrides templates/orderforms/nexus_cart/css/ * custom.css, so the parent's copy is not loaded. A --vl-* * name missing here is undefined, not inherited. * * Custom properties cross the shadow boundary, so assigning them * on :root reaches the cart's shadow content. :host is included * for the case where this sheet is adopted inside the shadow * root itself. * * WHY THERE IS NO PALETTE IN THIS FILE ANY MORE * The previous version restated a whole --primary-* blue ramp * "so this cart stays branded even if paired with a different * system theme". That is precisely how the storefront and the * cart drift apart — two palettes, two places to edit, one of * them quietly stale. Contract C2 guarantee 3 requires the cart * to resolve to the SAME --ibh-* sources as the system theme, so * the ramp is gone and every value below traces back to * templates/ibdaahost/css/custom.css. * * That gives the PALETTE dark mode for free: --ibh-* tokens * carry both values, so everything themed through --vl-* follows * the mode with no per-mode block here, and the `color-scheme` * declaration in the system theme makes the shadow content's * native controls follow too (FR-012a). * * ONE MEASURED CAVEAT, for T038's rendered check: style.min.css * also ships `.dark:*` utility classes scoped to * `:where(.vl-dark, .vl-dark *)`, and its JS tracks a * `vl-color-mode` state of its own. Whether those utilities * activate under OUR mode mechanism (data-mode on + * prefers-color-scheme) is not decidable from the stylesheets — * it depends on where the cart's JS stamps `vl-dark` relative to * the shadow boundary. T038 verifies the rendered cart in BOTH * modes and, if the utilities stay light, bridges them here * (external review 2026-07-29, finding 1). * * THE FALLBACK LAYER BELOW IS A LAST RESORT, NOT A PALETTE. * Cutover pairs Template=ibdaahost with OrderFormTemplate= * ibdaahost_cart in ONE transaction precisely so this cart is * never served beside another system theme (contract C7). But * feature 002 shipped an OrderFormTemplate re-point incident, so * the mispairing is demonstrated rather than theoretical, and an * undefined --vl-* renders the checkout UNSTYLED — a visible * outage on the one page where money changes hands. Each alias * therefore carries the light-mode hex as a var() fallback. * These are read ONLY when --ibh-* is absent, i.e. only when the * pairing is already wrong. Do not treat them as a second * palette and do not tune them; fix the pairing instead. * ============================================================ */ :host, :root { /* ---- last-resort aliases (see the header) ------------- */ --ibhc-bg: var(--ibh-bg, #faf7f4); --ibhc-surface: var(--ibh-surface, #fffdfb); --ibhc-surface-2: var(--ibh-surface-2, #f3efeb); --ibhc-surface-3: var(--ibh-surface-3, #e9e5e0); --ibhc-on-surface: var(--ibh-on-surface, #1f1915); --ibhc-muted: var(--ibh-muted, #635c57); --ibhc-subtle: var(--ibh-subtle, #8b8580); --ibhc-border: var(--ibh-border, #ddd8d4); --ibhc-border-strong: var(--ibh-border-strong, #bcb6b1); --ibhc-accent: var(--ibh-accent, #1b355b); --ibhc-accent-hover: var(--ibh-accent-hover, #071e40); --ibhc-btn: var(--ibh-btn, #1b355b); --ibhc-btn-hover: var(--ibh-btn-hover, #071e40); --ibhc-btn-on: var(--ibh-btn-on, #f8fafd); --ibhc-success: var(--ibh-success, #1d6835); --ibhc-success-strong: var(--ibh-success-strong, #005122); --ibhc-warning: var(--ibh-warning, #935f00); --ibhc-warning-strong: var(--ibh-warning-strong, #754b00); --ibhc-danger: var(--ibh-danger, #ac3031); --ibhc-danger-strong: var(--ibh-danger-strong, #910f1a); --ibhc-info: var(--ibh-info, #295e90); --ibhc-info-strong: var(--ibh-info-strong, #0f4778); --ibhc-r-1: var(--ibh-r-1, 3px); --ibhc-r-2: var(--ibh-r-2, 6px); --ibhc-r-3: var(--ibh-r-3, 10px); --ibhc-t-xs: var(--ibh-t-xs, 0.75rem); --ibhc-t-sm: var(--ibh-t-sm, 0.875rem); --ibhc-t-base: var(--ibh-t-base, 1rem); --ibhc-s-4: var(--ibh-s-4, 1rem); /* ---- the bridge: every --vl-* the cart reads ---------- * The 52 names below are the measured consumption set of * nexus_cart/css/style.min.css. Mappings mirror the system * theme's bridge exactly, so a control cannot look one way in * the client area and another in the checkout. * ---------------------------------------------------- */ /* primary / secondary — the BUTTON tokens, not the accent: the * cart's primary controls must match the system theme's navy in * both modes rather than flipping to the pale Material blue the * owner rejected (2026-07-30). */ --vl-primary: var(--ibhc-btn); --vl-primary-lifted: var(--ibhc-btn-hover); --vl-primary-accented: var(--ibhc-btn-hover); --vl-secondary: var(--ibhc-muted); --vl-secondary-lifted: var(--ibhc-on-surface); --vl-secondary-accented: var(--ibhc-on-surface); /* status */ --vl-success: var(--ibhc-success); --vl-success-lifted: var(--ibhc-success-strong); --vl-success-accented: var(--ibhc-success-strong); --vl-info: var(--ibhc-info); --vl-info-lifted: var(--ibhc-info-strong); --vl-info-accented: var(--ibhc-info-strong); /* This palette has no fifth hue; --notice folds onto the * accent, exactly as it does in the system theme. */ --vl-notice: var(--ibhc-accent); --vl-notice-lifted: var(--ibhc-accent-hover); --vl-notice-accented: var(--ibhc-accent-hover); --vl-warning: var(--ibhc-warning); --vl-warning-lifted: var(--ibhc-warning-strong); --vl-warning-accented: var(--ibhc-warning-strong); --vl-error: var(--ibhc-danger); --vl-error-lifted: var(--ibhc-danger-strong); --vl-error-accented: var(--ibhc-danger-strong); /* grayscale / neutral */ --vl-grayscale: var(--ibhc-on-surface); --vl-grayscale-lifted: var(--ibhc-on-surface); --vl-grayscale-accented: var(--ibhc-muted); --vl-neutral: var(--ibhc-muted); --vl-neutral-lifted: var(--ibhc-on-surface); --vl-neutral-accented: var(--ibhc-on-surface); /* text — --vl-text-muted mirrors the system theme's fix: * muted, not subtle, because placeholders and help text are * normal-size copy and subtle measures 3.59:1 (fails 4.5:1). */ --vl-text: var(--ibhc-on-surface); --vl-text-inverted: var(--ibhc-bg); --vl-text-muted: var(--ibhc-muted); --vl-text-lifted: var(--ibhc-muted); --vl-text-accented: var(--ibhc-on-surface); /* border */ --vl-border-muted: var(--ibhc-border); --vl-border: var(--ibhc-border); --vl-border-lifted: var(--ibhc-border-strong); --vl-border-accented: var(--ibhc-border-strong); /* background — --vl-bg is a COMPONENT background, matching * Nexus's --bg, so it takes surface and not the canvas. */ --vl-bg: var(--ibhc-surface); --vl-bg-muted: var(--ibhc-bg); --vl-bg-lifted: var(--ibhc-surface-2); --vl-bg-accented: var(--ibhc-surface-3); --vl-bg-inverted: var(--ibhc-on-surface); /* type sizes (these --vl-text-* names are SIZES, not * colours). Left at the STOCK values, matching the decision * in the system theme: Nexus's component metrics are * calibrated against this four-step scale, and an earlier * draft that remapped it collapsed xs and sm onto one value — * caught by external review. Four distinct steps, verbatim. */ --vl-text-xs: 0.625rem; --vl-text-sm: 0.75rem; --vl-text-md: 0.875rem; --vl-text-lg: 1rem; /* outlines, rounding, misc * --vl-outline-lg is consumed zero times today, but this file * REPLACES the parent's custom.css, and the replacement * invariant in the header — every parent declaration survives * — beats YAGNI here: a Nexus Cart update could start reading * it without touching this child, and an undefined property * in shadow content has no second chance to resolve. */ --vl-outline-sm: 1px; --vl-outline-md: 2px; --vl-outline-lg: 3px; --vl-rounding-sm: var(--ibhc-r-1); --vl-rounding-md: var(--ibhc-r-2); --vl-rounding-lg: var(--ibhc-r-3); /* --vl-spacing IS consumed by style.min.css and was NOT * declared by the previous version of this file — an * undefined property the cart has been reading all along. * Found by measuring consumption rather than by trusting the * old bridge to be complete. */ --vl-spacing: var(--ibhc-s-4); --vl-letter-spacing: 0em; --vl-disabled-opacity: 25%; } /* NO TYPE VARIABLE HERE, ON PURPOSE. The cart exposes no --vl-* * font-family hook — measured: style.min.css contains no * --vl-*font* name at all. The shadow content therefore inherits * the face from the page, which is what we want anyway: the * checkout cannot end up on a different face from the store page * that led into it, and the Arabic companion face carries through * with it. Declaring an invented --vl-font-family here would have * looked like configuration and done nothing. */