:root:root {
    /* ================================================================
       North Dispensaries — Brand Palette
       charcoal (header)   : #161c24
       navy (footer)       : #08253b
       blue (accent)       : #3c90cf
       blue dark (hover)   : #29688d
       red (primary CTA)   : #e50019
       body bg             : #f9fafb
       text                : #212b36
       ================================================================ */

    --dcm-font-primary: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    --dcm-font-secondary: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;

    /* Core color tokens */
    --dcm-color-primary: #e50019;
    --dcm-color-body-bg: #f9fafb;
    --dcm-color-surface: #ffffff;
    --dcm-color-surface-hover: #f1f3f5;
    --dcm-color-surface-muted: #f1f3f5;
    --dcm-color-text-primary: #212b36;
    --dcm-color-text-secondary: #454f5b;
    --dcm-color-text-inverted: #ffffff;
    --dcm-color-border: rgba(33, 43, 54, 0.14);
    --dcm-color-focus: #3c90cf;
    --dcm-color-focus-shadow: rgba(60, 144, 207, 0.35);

    /* Border radius — north.life buttons carry a small 4px radius;
       cards round slightly more. */
    --dcm-radius-sm: 4px;
    --dcm-radius-md: 6px;
    --dcm-radius-lg: 8px;
    --dcm-radius-buttons: 4px;
    --dcm-radius-cards: 8px;

    /* Status pills */
    --dcm-color-status-open: #1f9d55;
    --dcm-color-status-closed: #e50019;
    --dcm-color-status-preorder: #3c90cf;
    --dcm-color-status-coming-soon: #29688d;

    /* Host nav bar — charcoal surface, white text, blue hover accent,
       matching north.life's own header bar. */
    --dct--customized-colors-navBar: #161c24;
    --dcm-color-navbar-bg: #161c24;
    --dcm-header-bg: #161c24;
    --dcm-header-text-color: #ffffff;
    --dcm-header-nav-title-text-color: #ffffff;
    --dcm-header-border-color: rgba(255, 255, 255, 0.12);
    --dcm-header-shadow: 0 2px 8px rgba(3, 41, 68, 0.25);
    --dcm-header-divider-color: rgba(255, 255, 255, 0.12);
    --dcm-nav-link-color: #ffffff;
    --dcm-nav-link-hover-color: #3c90cf;
    --dcm-nav-link-active-color: #3c90cf;
    --dcm-nav-active-border-color: #e50019;
    --dcm-account-nav-color: #ffffff;

    /* Cart pill — white outline on the dark bar when empty, compass red
       when it has items. */
    --dcm-cart-btn-bg-empty: transparent;
    --dcm-cart-btn-text-empty: #ffffff;
    --dcm-cart-btn-bg-active: #e50019;
    --dcm-cart-btn-text-active: #ffffff;
    --dcm-cart-btn-border-radius: 4px;

    /* Search input */
    --dcm-search-input-border-color: rgba(33, 43, 54, 0.25);
    --dcm-search-input-border-radius: 4px;
    --dcm-search-input-focus-border-color: #3c90cf;
    --dcm-search-input-focus-shadow: 0 0 0 3px rgba(60, 144, 207, 0.25);

    /* Dropdown / popover surfaces */
    --dcm-popover-bg: #ffffff;
    --dcm-popover-item-color: #212b36;
    --dcm-popover-item-hover-bg: #f1f3f5;
    --dcm-popover-border-radius: 6px;
    --dcm-popover-shadow: 0 8px 24px rgba(3, 41, 68, 0.16);

    /* Side menu drawer */
    --dcm-drawer-bg: #ffffff;
    --dcm-drawer-tab-active-color: #29688d;
    --dcm-drawer-tab-inactive-color: #454f5b;
    --dcm-drawer-accent-color: #e50019;
    --dcm-drawer-nav-heading-color: #29688d;
    --dcm-drawer-nav-link-color: #212b36;

    /* Info bar */
    --dcm-infobar-bg: #08253b;
    --dcm-infobar-text-color: #ffffff;
    --dcm-infobar-border-color: #3c90cf;

    /* Footer (host-painted bottom rows; our custom <Footer> sits above).
       Painted the same navy as north.life's own footer so any
       SDK-rendered legal/privacy row reads as one continuous surface. */
    --dcm-footer-bg: #08253b;
    --dcm-footer-text-color: #ffffff;
    --dcm-privacy-footer-bg: rgba(255, 255, 255, 0.04);
    --dcm-privacy-footer-border-color: rgba(255, 255, 255, 0.14);
    --dcm-privacy-footer-text-color: rgba(255, 255, 255, 0.72);
    --dcm-privacy-footer-text-hover-color: #3c90cf;

    /* Banners + skip link */
    --dcm-banner-border-radius: 6px;
    --dcm-skip-link-bg: #e50019;
    --dcm-skip-link-color: #ffffff;

    /* Categories / brands cards */
    --dcm-categories-card-bg: #ffffff;
    --dcm-categories-card-border-color: rgba(33, 43, 54, 0.14);
    --dcm-categories-card-text-color: #212b36;
    --dcm-categories-view-all-bg: #08253b;
    --dcm-categories-view-all-color: #ffffff;
    --dcm-brands-card-bg: #ffffff;
    --dcm-brands-card-border-color: rgba(33, 43, 54, 0.14);
    --dcm-brands-card-border-radius: 8px;
    --dcm-brands-card-name-color: #212b36;

    /* Carousel chevron buttons */
    --dcm-carousel-btn-bg: #ffffff;
    --dcm-carousel-btn-hover-bg: #08253b;
    --dcm-carousel-btn-arrow-color: #212b36;
    --dcm-carousel-btn-color: #212b36;
    --dcm-carousel-btn-shadow: 0 2px 8px rgba(3, 41, 68, 0.16);

    /* Product (card + detail page) */
    --dcm-product-page-bg: #f9fafb;
    --dcm-product-name-color: #08253b;
    --dcm-product-brand-color: #29688d;
    --dcm-product-price-color: #212b36;
    --dcm-product-description-color: #454f5b;
    --dcm-product-option-bg: #ffffff;
    --dcm-product-option-border-color: rgba(33, 43, 54, 0.14);

    /* Cart drawer */
    --dcm-cart-bg: #f9fafb;
    --dcm-cart-content-bg: #ffffff;
    --dcm-cart-text-color: #212b36;
    --dcm-cart-border-color: rgba(33, 43, 54, 0.14);
    --dcm-cart-item-bg: #ffffff;
    --dcm-cart-price-color: #212b36;

    /* Filter sidebar */
    --dcm-filter-heading-color: #212b36;
    --dcm-filter-text-color: #212b36;
    --dcm-filter-border-color: rgba(33, 43, 54, 0.14);

    /* Modal */
    --dcm-modal-bg: #ffffff;
    --dcm-modal-text-color: #212b36;
    --dcm-modal-border-radius: 8px;
    --dcm-modal-shadow: 0 16px 48px rgba(3, 41, 68, 0.24);

    /* Breadcrumbs + section titles */
    --dcm-breadcrumb-link-color: #454f5b;
    --dcm-breadcrumb-active-color: #212b36;
    --dcm-breadcrumb-separator-color: rgba(33, 43, 54, 0.35);
    --dcm-section-title-color: #08253b;
    --dcm-section-subtitle-color: #454f5b;

    /* Legacy --dct-* tokens (predate --dcm-*, still feed a handful of
       host surfaces). Set in parity with the modern --dcm-* values. */
    --dct--customized-colors-buttonsLinks: #e50019;
    --dct--customized-fonts-primary: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    --dct--customized-fonts-secondary: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
    --dct--customized-maxSiteWidth: 1280px;
    --dct--customized-radius-xs: 4px;
    --dct--customized-radius-sm: 4px;
    --dct--customized-radius-md: 6px;
    --dct--customized-radius-lg: 8px;
    --dct--customized-radius-xl: 8px;
    --dct--customized-radius-tags: 4px;
    --dct--customized-radius-cards: 8px;
    --dct--customized-radius-buttons: 4px;
    --dct--customized-textTransforms-buttons: uppercase;
    --dct--customized-textTransforms-links: none;
    --dct--customized-textTransforms-tags: uppercase;

    /* Extra color base tokens */
    --dcm-color-text-muted: rgba(33, 43, 54, 0.5);
    --dcm-color-border-dark: rgba(33, 43, 54, 0.3);

    /* Header sizing */
    --dcm-header-border-width: 0px;
    --dcm-header-max-width: 1280px;

    /* Nav divider */
    --dcm-nav-divider-color: rgba(255, 255, 255, 0.12);

    /* Login nudge */
    --dcm-login-nudge-bg: #ffffff;
    --dcm-login-nudge-text-color: #212b36;
    --dcm-login-nudge-link-color: #29688d;
    --dcm-login-nudge-social-btn-bg: #f1f3f5;
    --dcm-login-nudge-shadow: 0 8px 24px rgba(3, 41, 68, 0.16);
    --dcm-login-nudge-close-color: #454f5b;
    --dcm-login-nudge-apple-icon-color: #212b36;

    /* Logged-out CTA card */
    --dcm-logged-out-cta-bg: #ffffff;
    --dcm-logged-out-cta-border-color: rgba(33, 43, 54, 0.14);
    --dcm-logged-out-cta-border-radius: 8px;
    --dcm-logged-out-cta-text-color: #212b36;
    --dcm-logged-out-cta-subtext-color: #454f5b;
    --dcm-logged-out-cta-link-color: #29688d;

    /* User button (sits on the charcoal header) */
    --dcm-user-btn-color: #ffffff;
    --dcm-user-btn-name-color: rgba(255, 255, 255, 0.72);
    --dcm-user-btn-name-border-color: rgba(255, 255, 255, 0.25);

    /* Account popover dropdown */
    --dcm-account-popover-shadow: 0 8px 24px rgba(3, 41, 68, 0.16);
    --dcm-account-popover-border-radius: 6px;
    --dcm-account-popover-logout-color: #e50019;

    /* Status label color (on the charcoal header) */
    --dcm-status-label-color: #ffffff;

    /* Drawer extras */
    --dcm-drawer-status-bg: #f1f3f5;
    --dcm-drawer-nav-title-text-color: #212b36;

    /* Footer extras */
    --dcm-footer-bg-sm: #08253b;
    --dcm-footer-border-top: none;
    --dcm-privacy-footer-divider-color: rgba(255, 255, 255, 0.14);
    --dcm-privacy-footer-shadow: none;

    /* Skeleton loaders */
    --dcm-skeleton-bg: #eef0f2;
    --dcm-skeleton-border-color: rgba(33, 43, 54, 0.1);
    --dcm-skeleton-border-radius: 4px;
    --dcm-skeleton-card-border-radius: 8px;
    --dcm-skeleton-shimmer-from: rgba(255, 255, 255, 0);
    --dcm-skeleton-shimmer-to: rgba(255, 255, 255, 0.6);

    /* Card-context width */
    --dcm-card-context-width: 100%;

    /* Categories / brands hover affordances */
    --dcm-categories-card-hover-shadow: 0 8px 20px rgba(3, 41, 68, 0.14);
    --dcm-brands-title-color: #08253b;
    --dcm-brands-no-results-color: #454f5b;
    --dcm-brands-card-shadow: none;
    --dcm-brands-card-hover-shadow: 0 8px 20px rgba(3, 41, 68, 0.14);
    --dcm-brands-card-placeholder-color: #454f5b;
    --dcm-brands-card-placeholder-bg: #f1f3f5;

    /* Product (PDP) extras */
    --dcm-product-subheading-color: #212b36;
    --dcm-product-price-strikethrough-color: rgba(33, 43, 54, 0.45);
    --dcm-product-price-muted-color: #454f5b;
    --dcm-product-option-text-color: #212b36;
    --dcm-product-input-bg: #ffffff;
    --dcm-product-input-border-color: rgba(33, 43, 54, 0.2);
    --dcm-product-detail-text-color: #212b36;
    --dcm-product-detail-muted-color: #454f5b;
    --dcm-product-effect-bg: #f1f3f5;
    --dcm-product-effect-text-color: #212b36;
    --dcm-product-progress-bg: #eef0f2;
    --dcm-product-progress-fill: #3c90cf;
    --dcm-product-accordion-icon-color: #212b36;
    --dcm-product-chip-bg: #f1f3f5;
    --dcm-product-chip-text-color: #212b36;
    --dcm-product-chip-hover-bg: #08253b;

    /* Cart drawer extras */
    --dcm-cart-text-muted-color: #454f5b;
    --dcm-cart-item-border-color: rgba(33, 43, 54, 0.14);
    --dcm-cart-item-separator-color: rgba(33, 43, 54, 0.08);
    --dcm-cart-toggle-bg: #f1f3f5;
    --dcm-cart-toggle-active-bg: #e50019;
    --dcm-cart-backdrop-color: rgba(8, 37, 59, 0.55);

    /* Filter sidebar extras */
    --dcm-filter-icon-color: #454f5b;
    --dcm-filter-search-bg: #ffffff;
    --dcm-filter-search-border-color: rgba(33, 43, 54, 0.2);
    --dcm-filter-search-text-color: #212b36;
    --dcm-filter-search-placeholder-color: rgba(33, 43, 54, 0.45);
    --dcm-filter-search-icon-color: #454f5b;

    /* Modal extras */
    --dcm-modal-backdrop-color: rgba(8, 37, 59, 0.6);
    --dcm-modal-close-color: #454f5b;
    --dcm-modal-footer-bg: #f1f3f5;
    --dcm-modal-footer-text-color: #212b36;

    /* Content header */
    --dcm-content-header-text-color: #212b36;
    --dcm-content-header-border-color: rgba(33, 43, 54, 0.14);
    --dcm-content-header-icon-color: #212b36;

    /* Inline categories */
    --dcm-inline-categories-heading-color: #08253b;
    --dcm-inline-categories-divider-color: rgba(33, 43, 54, 0.14);
    --dcm-inline-categories-chip-bg: #f1f3f5;
    --dcm-inline-categories-chip-text-color: #212b36;
    --dcm-inline-categories-chip-border-color: rgba(33, 43, 54, 0.14);
    --dcm-inline-categories-chip-hover-border-color: #3c90cf;

    /* Checkout flow */
    --dcm-checkout-heading-color: #454f5b;
    --dcm-checkout-section-heading-color: #212b36;
    --dcm-checkout-section-border-color: rgba(33, 43, 54, 0.14);
    --dcm-checkout-text-color: #212b36;
    --dcm-checkout-text-muted-color: #454f5b;
    --dcm-checkout-link-color: #29688d;
    --dcm-checkout-input-bg: #ffffff;
    --dcm-checkout-input-border-color: rgba(33, 43, 54, 0.2);
    --dcm-checkout-summary-bg: #f1f3f5;
    --dcm-checkout-summary-text-color: #212b36;
    --dcm-checkout-summary-border-color: rgba(33, 43, 54, 0.14);
    --dcm-checkout-summary-total-color: #212b36;
    --dcm-checkout-payment-tab-bg: #ffffff;
    --dcm-checkout-payment-tab-border-color: rgba(33, 43, 54, 0.14);
    --dcm-checkout-payment-content-bg: #ffffff;
    --dcm-checkout-disclaimer-color: #454f5b;
    --dcm-checkout-save-info-bg: #f1f3f5;

    /* Age gate — north.life greets visitors with a white card over a
       dimmed backdrop; keep body text dark and links compass blue. */
    --dcm-age-gate-body-color: #212b36;
    --dcm-age-gate-link-color: #29688d;
    --dcm-age-gate-backdrop-blur: 4px;

    /* Collections */
    --dcm-collections-description-color: #212b36;
    --dcm-collections-timer-bg: #08253b;
    --dcm-collections-timer-text-color: #ffffff;

    /* Locations browser — North runs two Jefferson County stores
       (Hillsboro + Pevely), so this surface gets real use. */
    --dcm-locations-heading-color: #08253b;
    --dcm-locations-text-color: #212b36;
    --dcm-locations-subtext-color: #454f5b;
    --dcm-locations-link-color: #29688d;
    --dcm-locations-card-bg: #ffffff;
    --dcm-locations-card-border-color: rgba(33, 43, 54, 0.14);
    --dcm-locations-card-text-color: #212b36;
    --dcm-locations-card-hover-bg: #f1f3f5;
    --dcm-locations-card-hover-border-color: #3c90cf;
    --dcm-locations-browser-bg: #f9fafb;
    --dcm-locations-browser-text-color: #212b36;
    --dcm-locations-marker-label-bg: #08253b;
    --dcm-locations-marker-address-color: rgba(255, 255, 255, 0.72);
    --dcm-locations-scrollbar-color: rgba(33, 43, 54, 0.35);
    --dcm-locations-pin-color: #e50019;
    --dcm-locations-pin-highlight-color: #08253b;
    --dcm-locations-close-hover-bg: #f1f3f5;

    /* Referral / "Invite a friend" flow */
    --dcm-referral-border-color: rgba(33, 43, 54, 0.14);
    --dcm-referral-heading-color: #08253b;
    --dcm-referral-subtext-color: #212b36;
    --dcm-referral-disclaimer-color: #454f5b;
    --dcm-referral-disclaimer-underline-color: rgba(33, 43, 54, 0.14);
    --dcm-referral-input-bg: #ffffff;
    --dcm-referral-input-text-color: #212b36;
    --dcm-referral-input-border-color: rgba(33, 43, 54, 0.2);
    --dcm-referral-qr-modal-bg: #ffffff;
    --dcm-referral-qr-heading-color: #08253b;
    --dcm-referral-qr-text-color: #212b36;
    --dcm-referral-tab-inactive-bg: #f1f3f5;

    /* Account pages */
    --dcm-account-bg: #f9fafb;
    --dcm-account-surface-bg: #ffffff;
    --dcm-account-surface-shadow: rgba(3, 41, 68, 0.08);
    --dcm-account-label-color: #454f5b;
    --dcm-account-divider-color: rgba(33, 43, 54, 0.14);
    --dcm-account-icon-fill: #f1f3f5;
    --dcm-account-icon-accent: #3c90cf;
    --dcm-account-icon-stroke: #29688d;
  }

  /* Base html/body — applied pre-boot so the page never paints with
     platform defaults before Montserrat + the light palette take over.
     The host SDK also references --dcm-font-primary directly on its own
     elements. */
  html {
    font-family: var(--dcm-font-primary, 'Helvetica Neue', Arial, sans-serif);
  }

  body {
    background: var(--dcm-color-body-bg);
    color: var(--dcm-color-text-primary);
  }

  /* north.life sets headings in bold Montserrat with tight tracking —
     apply the heading treatment wherever the host marks up heading-level
     text explicitly. */
  h1,
  h2,
  h3 {
    font-family: var(--dcm-font-secondary, var(--dcm-font-primary));
    font-weight: 700;
    letter-spacing: -0.01em;
  }