@font-face {
    font-family: 'Archivo Variable';
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url(https://extensions.bud-authority.dutchie.partners/static/css/assets/archivo-latin-wght-normal.8f704806.woff2) format('woff2-variations');
  }

  @font-face {
    font-family: 'Source Sans 3 Variable';
    font-style: normal;
    font-display: swap;
    font-weight: 200 900;
    src: url(https://extensions.bud-authority.dutchie.partners/static/css/assets/source-sans-3-latin-wght-normal.7a19a702.woff2) format('woff2-variations');
  }

  @font-face {
    font-family: 'Spline Sans Mono Variable';
    font-style: normal;
    font-display: swap;
    font-weight: 300 700;
    src: url(https://extensions.bud-authority.dutchie.partners/static/css/assets/spline-sans-mono-latin-wght-normal.46b7dcaf.woff2) format('woff2-variations');
  }

  :root:root {

    /* ------------------------------------------------------------------ *
     * BRAND PRIMITIVES (identical values to the marketing site's ramps)
     * ------------------------------------------------------------------ */

    /* The light ramp this theme started from has been removed. Every host
       token and every component reads the AFTER HOURS ramp below, so the old
       primitives were dead weight a future edit could have reached for and
       quietly reintroduced a pale surface with. */

    /* ------------------------------------------------------------------ *
     * TYPOGRAPHY
     * The header and footer were already written against these three names
     * but nothing ever defined them, so both were falling back to Georgia.
     * ------------------------------------------------------------------ */
    /* Repointed to the marketing site's three roles. Every component in this
       theme reads --font-sans / --font-display, so this is the one place the
       whole storefront changes face. The previous faces went with the ramp;
       --font-emblem is kept as an alias rather than deleted because components
       still name it, and it now resolves to the display face. */
    --font-sans: 'Source Sans 3 Variable', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-display: 'Archivo Variable', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'Spline Sans Mono Variable', ui-monospace, SFMono-Regular, Menlo, monospace;
    --font-emblem: var(--font-display);

    --dcm-font-primary: var(--font-sans);
    --dcm-font-secondary: var(--font-display);

    /* ================================================================== *
     * VEGAS TREEHOUSE — "AFTER HOURS"
     *
     * LAYER 1 primitives, copied verbatim from the marketing site's
     * app/tokens.css. Values are not re-derived here: the site's token file
     * is the single source, and every hex below matches it exactly so the
     * storefront masthead and the site masthead cannot drift apart.
     *
     * LAYER 1 primitives. Everything else in this theme resolves to these:
     * the host token map below, and every component's own styles.
     * ================================================================== */

    /* THE INK RAMP — night air, not switched-off screen. Never pure black:
       a true black kills every shadow and sits product photography on nothing. */
    --vt-void:  #050506;   /* deepest well — the footer ground */
    --vt-night: #08090A;   /* primary ground */
    --vt-night-2: #0E1013;
    --vt-night-3: #15171B;
    --vt-night-4: #212429;  /* hairlines, strong rules */

    /* THE TYPE RAMP — measured by the site's author against the grounds it is
       actually used on. bone 17.97:1 on the void, dim 8.69:1, faint 6.00:1.
       #6E7076 is decoration only: it measures 4.03:1 and fails AA for text. */
    --vt-bone:  #F5F3EE;
    --vt-dim:   #A9ABB2;
    --vt-faint: #8A8D95;

    /* THE ACCENT — acid lime, the only chromatic colour in the system. It
       carries the roofline, hover, focus and the primary action. 16.87:1 on
       the void, and 16.87:1 inverted, so it is legible as ground and figure. */
    --vt-hot:      #C6FF3D;
    --vt-hot-lift: #DBFF7A;

    /* THE MARK — the exact wordmark green. Identity only. It is NOT the
       interface accent: it appears on the roofline and the logo, nowhere else. */
    --vt-green-500: #00B855;
    --vt-green-600: #009444;
    --vt-green-700: #067A3B;

    /* The logo plate, and nothing else. The wordmark's "vegas" is logo ink
       #231F20 and would vanish on the night ground, and the brand contract
       forbids restyling the mark — so the artwork is lit rather than recoloured. */
    --vt-paper: #FFFDF7;

    /* SIGNAL — states that are not brand. Never decorative. Both are the
       marketing site's own values, lightened for a dark ground. */
    --vt-warn: #E8B44A;
    --vt-stop: #E4746A;

    /* STRAIN TYPE. The host requires a colour per strain family, and AFTER
       HOURS is otherwise monochrome plus one lime. These are deliberately
       desaturated and near-equal in luminance, so the row reads as a set of
       quiet hints rather than a rainbow, and each clears AA on the pill ground
       below. Lime is NOT used here: it is the action colour, and a strain
       badge is not an action. */
    --vt-strain-sativa: #E8A87C;
    --vt-strain-indica: #C9A5D8;
    --vt-strain-hybrid: #8FBEE0;
    --vt-strain-cbd:    #8CE6AE;
    --vt-strain-bg:     #1B1E23;

    /* Semantic layer the header and footer read. */
    --vt-bg-deep:     var(--vt-void);
    --vt-fg:          var(--vt-bone);
    --vt-fg-dim:      var(--vt-dim);
    --vt-fg-faint:    var(--vt-faint);
    --vt-line:        rgba(245, 243, 238, 0.14);
    --vt-line-strong: rgba(245, 243, 238, 0.26);
    --vt-edge:        var(--vt-green-500);   /* the roofline bar */
    --vt-signal:      var(--vt-hot);         /* focus, success, "live" */
    --vt-accent-text: var(--vt-hot);
    --vt-action:      var(--vt-hot);
    --vt-action-fg:   var(--vt-void);        /* near-black ON lime, never white */

    --vt-header-h: 66px;
    --vt-edge-glow: 0.55;                    /* how hard the roofline burns */
    --vt-hair: 1px;
    --vt-edge-w: 2px;                        /* BORDER-SIGNAL — the roofline */
    --vt-r-sm: 6px;
    --vt-r-md: 14px;
    --vt-r-pill: 999px;
    --vt-w-wide: 1440px;
    --vt-gutter: 16px;
    --vt-step-cap: 0.84rem;
    --vt-tr-cap: 0.04em;
    --vt-ease-ui: cubic-bezier(0.2, 0, 0, 1);
    --vt-t-state: 240ms;

    /* Type roles, scoped so they do not repoint the theme-wide --font-* vars
       that every other component in this theme still reads. */
    --vt-font-display: 'Archivo Variable', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --vt-font-body: 'Source Sans 3 Variable', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --vt-font-mono: 'Spline Sans Mono Variable', ui-monospace, SFMono-Regular, Menlo, monospace;

    /* ------------------------------------------------------------------ *
     * CORE SURFACES
     * The base set moves as one block. The host derives a number of unset
     * tokens (product chips, progress bars, modal footers) from these via
     * var() chains, so shifting only some of them leaks a stale surface onto
     * a page far away from the one being styled.
     * ------------------------------------------------------------------ */
    --dcm-color-body-bg: var(--vt-night);
    --dcm-color-text-primary: var(--vt-bone);

    --dcm-color-primary: var(--vt-hot);
    --dcm-color-surface: var(--vt-night-3);
    --dcm-color-surface-hover: var(--vt-night-2);
    --dcm-color-surface-muted: var(--vt-night-2);
    --dcm-color-text-secondary: var(--vt-dim);
    --dcm-color-text-inverted: var(--vt-night-2);
    --dcm-color-text-muted: var(--vt-faint);
    --dcm-color-border: rgba(245, 243, 238, 0.12);
    --dcm-color-border-dark: rgba(245, 243, 238, 0.24);
    --dcm-color-focus: var(--vt-hot);
    --dcm-color-focus-shadow: rgba(198, 255, 61, 0.40);

    /* Border radius. The marketing site's card language is 8/16/24. */
    --dcm-radius-sm: 4px;
    --dcm-radius-md: 8px;
    --dcm-radius-lg: 16px;
    --dcm-radius-buttons: 9999px;
    --dcm-radius-cards: 16px;

    /* ------------------------------------------------------------------ *
     * HOST NAVIGATION BAR
     * This is Dutchie's own shop bar, which sits directly beneath our navy
     * masthead. It was a solid brass band, which read as a second unrelated
     * header. Navy with a brass hairline lets the two rows resolve into one
     * masthead. Revert by setting --dcm-header-bg back to var(--vt-hot)
     * and the two text colours back to var(--vt-bone).
     * ------------------------------------------------------------------ */
    --dcm-header-bg: var(--vt-void);
    --dcm-header-text-color: var(--vt-bone);
    --dcm-header-border-color: rgba(198, 255, 61, 0.20);
    --dcm-header-shadow: none;
    --dcm-header-divider-color: rgba(245, 243, 238, 0.15);
    /* Heading inside the Shop dropdown ("Categories"). Despite the "header-"
       prefix this does NOT sit on the header bar, it sits on --dcm-popover-bg,
       so it follows the popover rather than the nav. Grouped with the header
       tokens it was given cream, which put #eaf0f6 on the #fbfcfe popover at
       about 1.1:1 and made the heading disappear. Same trap as #307 on another
       theme in this repo, inverted: there a dark value was left on a darkened
       popover, here a light value was left on a light one. */
    --dcm-header-nav-title-text-color: var(--vt-bone);

    /* Cart button: the brass pill, matching the masthead's SHOP MENU CTA */
    --dcm-cart-btn-bg-active: var(--vt-hot);
    --dcm-cart-btn-bg-empty: var(--vt-hot);
    --dcm-cart-btn-text-empty: var(--vt-void);
    --dcm-cart-btn-border-radius: 9999px;
    --dcm-cart-btn-bg-hover: var(--vt-hot-lift);
    --dcm-cart-btn-border-color: var(--vt-hot);

    /* Search */
    --dcm-search-input-border-color: rgba(245, 243, 238, 0.24);
    --dcm-search-input-border-radius: 9999px;
    --dcm-search-input-focus-border-color: var(--vt-hot);
    --dcm-search-input-focus-shadow: 0 0 0 3px rgba(198, 255, 61, 0.35);

    /* Popover / Dropdown */
    --dcm-popover-bg: var(--vt-night-3);
    --dcm-popover-item-color: var(--vt-bone);
    --dcm-popover-item-hover-bg: var(--vt-night);
    --dcm-popover-border-radius: 12px;
    --dcm-popover-shadow: 0 20px 50px rgba(6, 12, 24, 0.26), 0 6px 12px rgba(6, 12, 24, 0.12);

    /* Info Bar */
    --dcm-infobar-bg: var(--vt-night-3);
    --dcm-infobar-text-color: var(--vt-bone);
    --dcm-infobar-border-color: rgba(245, 243, 238, 0.12);
    /* The "MENU" label above Recreational/Medical sits on the navy nav bar, not
       on the fog-white page. Grouped with the light-surface tokens it was given
       ink, which measured 1.15:1 against #0c1628 and was effectively invisible.
       cream-400 measures about 10:1 there and matches the OPEN/CLOSED label
       beside it. */
    --dcm-menu-type-label-color: var(--vt-dim);

    /* Menu Drawer */
    --dcm-drawer-bg: var(--vt-night-2);
    --dcm-drawer-tab-active-color: var(--vt-hot);
    --dcm-drawer-tab-inactive-color: var(--vt-faint);
    --dcm-drawer-accent-color: var(--vt-hot);
    --dcm-drawer-nav-heading-color: var(--vt-faint);
    --dcm-drawer-nav-link-color: var(--vt-bone);

    /* Footer. Our own footer component paints itself; these cover the host's
       privacy strip so it does not flash a warm cream band under the navy. */
    --dcm-footer-bg: var(--vt-void);
    --dcm-footer-text-color: var(--vt-dim);
    --dcm-privacy-footer-bg: var(--vt-void);
    --dcm-privacy-footer-border-color: rgba(245, 243, 238, 0.12);
    --dcm-privacy-footer-text-color: var(--vt-dim);
    --dcm-privacy-footer-text-hover-color: var(--vt-bone);

    /* Status colors */
    --dcm-color-status-open: var(--vt-green-500);
    --dcm-color-status-closed: var(--vt-stop);
    --dcm-color-status-preorder: var(--vt-strain-hybrid);
    --dcm-color-status-coming-soon: var(--vt-hot);

    /* Skeleton / Loading placeholders. Cool-family, so the loading state does
       not flash warm beige over a fog-white page. */
    --dcm-skeleton-bg: var(--vt-night-4);
    --dcm-skeleton-border-color: rgba(245, 243, 238, 0.1);
    --dcm-skeleton-shimmer-from: rgba(245, 243, 238, 0.04);
    --dcm-skeleton-shimmer-to: rgba(245, 243, 238, 0.09);
    --dcm-skeleton-shimmer-dark-from: rgba(245, 243, 238, 0.04);
    --dcm-skeleton-shimmer-dark-to: rgba(245, 243, 238, 0.09);

    /* Login nudge */
    --dcm-login-nudge-bg: var(--vt-night-3);
    --dcm-login-nudge-text-color: var(--vt-bone);
    --dcm-login-nudge-link-color: var(--vt-hot);
    --dcm-logged-out-cta-bg: var(--vt-void);
    --dcm-logged-out-cta-link-color: var(--vt-hot);
    --dcm-logged-out-cta-border-color: rgba(245, 243, 238, 0.16);
    --dcm-logged-out-cta-subtext-color: var(--vt-dim);
    --dcm-logged-out-cta-text-color: var(--vt-bone);

    /* Categories */
    --dcm-categories-card-bg: var(--vt-night-3);
    --dcm-categories-card-border-color: rgba(245, 243, 238, 0.12);
    --dcm-categories-card-text-color: var(--vt-bone);
    --dcm-categories-view-all-bg: var(--vt-night-2);

    /* Brands */
    --dcm-brands-card-bg: var(--vt-night-3);
    --dcm-brands-card-border-color: rgba(245, 243, 238, 0.12);
    --dcm-brands-card-border-radius: 16px;
    --dcm-brands-card-name-color: var(--vt-bone);

    /* Product */
    --dcm-product-page-bg: var(--vt-night);
    --dcm-product-name-color: var(--vt-bone);
    --dcm-product-brand-color: var(--vt-faint);
    --dcm-product-price-color: var(--vt-bone);
    --dcm-product-description-color: var(--vt-dim);
    --dcm-product-option-bg: var(--vt-night-3);
    --dcm-product-option-border-color: rgba(245, 243, 238, 0.14);

    /* Cart drawer */
    --dcm-cart-bg: var(--vt-night-2);
    --dcm-cart-content-bg: var(--vt-night-3);
    --dcm-cart-text-color: var(--vt-bone);
    --dcm-cart-border-color: rgba(245, 243, 238, 0.12);
    --dcm-cart-item-bg: var(--vt-night-3);

    /* Carousel navigation */
    --dcm-carousel-btn-bg: var(--vt-hot);
    --dcm-carousel-btn-hover-bg: var(--vt-hot-lift);
    --dcm-carousel-btn-arrow-color: var(--vt-night-3);

    /* Filter sidebar */
    --dcm-filter-heading-color: var(--vt-bone);
    --dcm-filter-text-color: var(--vt-dim);
    --dcm-filter-border-color: rgba(245, 243, 238, 0.12);

    /* Modal */
    --dcm-modal-bg: var(--vt-night-3);
    --dcm-modal-text-color: var(--vt-bone);
    --dcm-modal-border-radius: 16px;
    --dcm-modal-shadow: 0 20px 50px rgba(6, 12, 24, 0.26), 0 6px 12px rgba(6, 12, 24, 0.12);

    /* Checkout */
    --dcm-checkout-heading-color: var(--vt-bone);
    --dcm-checkout-text-color: var(--vt-dim);
    --dcm-checkout-input-bg: var(--vt-night-3);
    --dcm-checkout-summary-bg: var(--vt-night-3);

    /* Breadcrumbs */
    --dcm-breadcrumb-link-color: var(--vt-faint);
    --dcm-breadcrumb-active-color: var(--vt-bone);

    /* Section titles */
    --dcm-section-title-color: var(--vt-bone);
    --dcm-section-subtitle-color: var(--vt-dim);

    /* Content header */
    --dcm-content-header-text-color: var(--vt-bone);
    --dcm-content-header-border-color: rgba(245, 243, 238, 0.12);

    /* Primary buttons and links.
       The host hardcodes its primary-button label ("Add to cart") to white and
       exposes no token for it, so whatever colour lands here has to carry white
       text on its own. brass-400 #bc9038 is only 2.9:1 against white and would
       fail; brass-600 #6f521a measures 7.2:1, and 7.2:1 as a link colour on the
       fog-white page too. */
    --dct--customized-colors-buttonsLinks: var(--vt-green-700);

    /* Generic aliases consumed directly by header.tsx and footer.tsx */
    --background: var(--vt-bone);
    --foreground: var(--vt-night);
    --accent: var(--vt-hot);
    --surface: var(--vt-night-3);
    --surface-hover: var(--vt-night-2);
    --rule: rgba(245, 243, 238, 0.16);
    --button-radius: 9999px;
    --button-height-sm: 2rem;
    --radius-sm: 4px;
    --header-h: 4.5rem;
    --dcm-color-card-price: var(--vt-bone);
    --dcm-color-badge-text: var(--vt-night-2);
    --dcm-color-badge-background: var(--vt-hot);
    --dcm-color-price-card-background: var(--vt-night-2);

    /* ------------------------------------------------------------------ *
     * HOST TOKENS THE STYLING DOC DOES NOT LIST
     *
     * The doc covers ~100 properties; the host actually defines 600+ on the
     * page, and everything below was still sitting on a Dutchie stock value
     * after the brand pass. Found by enumerating every custom property on the
     * live storefront and diffing against the brand ramp, which is the only
     * way these surface: they are stock greys, a stock teal and a stock blue,
     * so they look "fine" in isolation and only read as wrong next to the
     * brand. Re-run that diff after any SDK upgrade, since new stock tokens
     * arrive unset and therefore unbranded.
     * ------------------------------------------------------------------ */

    /* The potency meters on category pages rendered stock teal #43ab92 */
    --dcm-product-progress-fill: var(--vt-hot);

    --dcm-checkout-link-color: var(--vt-hot);
    --dcm-account-popover-logout-color: var(--vt-hot);

    /* ------------------------------------------------------------------ *
     * TOKENS THAT ARE UNSET RATHER THAN STOCK
     *
     * Enumerating the custom properties present on the page has a blind spot:
     * a token the theme never sets and the host never declares does not show
     * up at all, yet the component reading it still falls back to a hardcoded
     * colour. Those are invisible to that method and were missed on the first
     * two passes.
     *
     * The complete list comes from the host's own bundles instead: scrape
     * /--dcm-[a-z0-9-]+/ out of every first-party js/css asset the storefront
     * loads. That yields 515 names against the ~205 this theme sets. To find
     * which of the remainder actually paint, set them all to a sentinel colour
     * on the live page and look for what changes.
     * ------------------------------------------------------------------ */

    /* The "Shop All Products" anchor on every category page. This is the one
       #0b99e6 that survived the previous pass: it is NOT driven by
       --dcm-checkout-link-color, which that commit message claimed. It has its
       own token, and that token was simply never declared. */
    --dcm-shop-all-products-link-color: var(--vt-hot);

    /* Two parallel status families exist and only the second is read for the
       header's open/closed label. --dcm-color-status-* (set above) is a
       different, similarly named set, which is why the "CLOSED" text stayed
       stock red through both previous passes.

       These sit on the navy nav bar, not on the fog-white page, so each one is
       measured against #0c1628: sage-300 7.5:1, coral-300 6.3:1, sea-400 6.7:1,
       brass-300 8.3:1, cream-400 10:1. The darker ramp steps used elsewhere in
       this file would all land under 4:1 here. */
    --dcm-status-open-color: var(--vt-green-500);
    --dcm-status-closed-color: var(--vt-stop);
    --dcm-status-preorder-color: var(--vt-strain-hybrid);
    --dcm-status-coming-soon-color: var(--vt-hot);
    --dcm-status-label-color: var(--vt-dim);

    /* Google / Apple buttons in the login nudge. Left explicit so the vendor
       logos keep a light ground no matter what the host default becomes. */
    --dcm-login-nudge-social-btn-bg: var(--vt-night-3);

    /* Was #F8F7F2, a warm cream left over from the cloned theme's palette */
    --dcm-color-navbar-bg: var(--vt-night);
    --dcm-storefront-header-bg: var(--vt-night-3);
    --dcm-storefront-header-border-color: rgba(245, 243, 238, 0.12);
    --dcm-nav-link-color: var(--vt-bone);

    --dcm-specials-multi-tier-badge-bg: var(--vt-hot);
    --dcm-collections-timer-bg: var(--vt-night-3);
    --dcm-collections-timer-text-color: var(--vt-bone);
    --dcm-collections-description-color: var(--vt-dim);
    --dcm-locations-pin-highlight-color: var(--vt-strain-hybrid);

    /* The host's own strain pills, distinct from the ones our product cards
       draw. Tinted grounds with a dark hue on top, so each one clears 4.5:1
       (tangerine 5.2, orchid 7.6, navy 6.6, sage 4.6) rather than relying on
       colour alone. */
    --dcm-strain-type-pill-bg-sativa: var(--vt-strain-bg);
    --dcm-strain-type-pill-text-sativa: var(--vt-strain-sativa);
    --dcm-strain-type-pill-bg-sativa-hybrid: var(--vt-strain-bg);
    --dcm-strain-type-pill-text-sativa-hybrid: var(--vt-strain-sativa);
    --dcm-strain-type-pill-bg-indica: var(--vt-strain-bg);
    --dcm-strain-type-pill-text-indica: var(--vt-strain-indica);
    --dcm-strain-type-pill-bg-indica-hybrid: var(--vt-strain-bg);
    --dcm-strain-type-pill-text-indica-hybrid: var(--vt-strain-indica);
    --dcm-strain-type-pill-bg-hybrid: var(--vt-night);
    --dcm-strain-type-pill-text-hybrid: var(--vt-strain-hybrid);
    --dcm-strain-type-pill-bg-cbd: var(--vt-strain-bg);
    --dcm-strain-type-pill-text-cbd: var(--vt-green-500);
    --dcm-strain-type-pill-bg-high-cbd: var(--vt-strain-bg);
    --dcm-strain-type-pill-text-high-cbd: var(--vt-green-500);
    --dcm-strain-type-pill-bg-cbg: var(--vt-strain-bg);
    --dcm-strain-type-pill-text-cbg: var(--vt-green-500);
    --dcm-strain-type-pill-bg-thc: var(--vt-night);
    --dcm-strain-type-pill-text-thc: var(--vt-dim);
    --dcm-strain-type-pill-bg-seed: var(--vt-night);
    --dcm-strain-type-pill-text-seed: var(--vt-dim);

    /* Account, checkout, locations and referral panels were a stock grey-blue
       family that reads cooler and flatter than the brand's ink ramp. */
    --dcm-account-bg: var(--vt-night-2);
    --dcm-account-divider-color: rgba(245, 243, 238, 0.12);
    --dcm-account-icon-accent: var(--vt-dim);
    --dcm-account-icon-fill: var(--vt-night);
    --dcm-account-icon-stroke: var(--vt-dim);
    --dcm-account-label-color: var(--vt-faint);
    --dcm-account-link-icon-color: var(--vt-faint);
    --dcm-account-nav-color: var(--vt-dim);
    --dcm-account-popover-divider-color: rgba(245, 243, 238, 0.14);
    --dcm-account-popover-item-color: var(--vt-dim);
    --dcm-account-popover-item-hover-bg: var(--vt-night);
    --dcm-account-surface-shadow: rgba(245, 243, 238, 0.1);
    --dcm-user-btn-name-border-color: rgba(245, 243, 238, 0.16);

    --dcm-age-gate-body-color: var(--vt-dim);
    --dcm-brands-card-placeholder-color: var(--vt-dim);
    --dcm-brands-title-color: var(--vt-bone);
    --dcm-breadcrumb-separator-color: var(--vt-faint);
    --dcm-categories-view-all-color: var(--vt-dim);

    --dcm-checkout-disclaimer-color: var(--vt-faint);
    --dcm-checkout-payment-icon-color: var(--vt-faint);
    --dcm-checkout-payment-tab-border-color: rgba(245, 243, 238, 0.14);
    --dcm-checkout-save-info-bg: var(--vt-night-2);
    --dcm-checkout-section-border-color: rgba(245, 243, 238, 0.12);
    --dcm-checkout-section-heading-color: var(--vt-dim);
    --dcm-checkout-summary-border-color: rgba(245, 243, 238, 0.14);
    --dcm-checkout-summary-text-color: var(--vt-dim);
    --dcm-checkout-summary-total-color: var(--vt-bone);
    --dcm-checkout-text-muted-color: var(--vt-faint);

    --dcm-drawer-close-btn-color: var(--vt-faint);
    --dcm-drawer-status-bg: var(--vt-night);
    --dcm-login-nudge-apple-icon-color: var(--vt-dim);
    --dcm-login-nudge-close-color: var(--vt-dim);
    --dcm-privacy-footer-divider-color: rgba(245, 243, 238, 0.16);

    --dcm-locations-browser-text-color: var(--vt-dim);
    --dcm-locations-card-bg: var(--vt-night-3);
    --dcm-locations-card-border-color: rgba(245, 243, 238, 0.12);
    --dcm-locations-card-hover-bg: var(--vt-night);
    --dcm-locations-card-hover-border-color: rgba(245, 243, 238, 0.2);
    --dcm-locations-card-text-color: var(--vt-dim);
    --dcm-locations-close-hover-bg: var(--vt-night-4);
    --dcm-locations-heading-color: var(--vt-bone);
    --dcm-locations-marker-address-color: var(--vt-dim);
    --dcm-locations-scrollbar-color: var(--vt-faint);
    --dcm-locations-subtext-color: var(--vt-dim);
    --dcm-locations-text-color: var(--vt-dim);

    --dcm-referral-border-color: rgba(245, 243, 238, 0.12);
    --dcm-referral-disclaimer-color: var(--vt-faint);
    --dcm-referral-heading-color: var(--vt-bone);
    --dcm-referral-input-bg: var(--vt-night-3);
    --dcm-referral-input-border-color: rgba(245, 243, 238, 0.14);
    --dcm-referral-input-text-color: var(--vt-dim);
    --dcm-referral-qr-text-color: var(--vt-dim);
    --dcm-referral-subtext-color: var(--vt-dim);
    --dcm-referral-tab-inactive-bg: var(--vt-night);
  }

  html,
  body {
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  body {
    background: var(--dcm-color-body-bg) !important;
    color: var(--dcm-color-text-primary) !important;
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* The host renders its own section titles ("Categories", "Popular Flower",
     "All Flower") and exposes a colour token for them but no font token. Element
     selectors are a supported styling surface (unlike generated class names), and
     this is the same base rule the marketing site applies, so the two properties
     stay in step. Colour deliberately stays inherit: a concrete colour here
     beats inheritance and repaints every heading that sits inside a dark section
     which sets its text colour on a wrapper. */
  h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.022em;
    color: inherit;
  }