:root:root {
    /* ================================================================
       Information Entropy — Brand Palette
       ink (near-black)      : #0a0a0a
       bone (body bg)        : #efede4
       paper (surface)       : #f5f3ec
       accent (terminal grn) : #22c55e
       accent-warm (promo)   : #ff5b1f
       ================================================================ */

    --dcm-font-primary: 'JetBrains Mono', 'SFMono-Regular', Menlo, Consolas, monospace;
    --dcm-font-secondary: 'Archivo Black', 'Arial Black', sans-serif;

    /* Core color tokens */
    --dcm-color-primary: #22c55e;
    --dcm-color-body-bg: #efede4;
    --dcm-color-surface: #f5f3ec;
    --dcm-color-surface-hover: #e9e7dd;
    --dcm-color-surface-muted: #e9e7dd;
    --dcm-color-text-primary: #0a0a0a;
    --dcm-color-text-secondary: rgba(10, 10, 10, 0.65);
    --dcm-color-text-inverted: #efede4;
    --dcm-color-border: rgba(10, 10, 10, 0.18);
    --dcm-color-focus: #22c55e;
    --dcm-color-focus-shadow: rgba(34, 197, 94, 0.35);

    /* Border radius — the live site is almost entirely square: borders
       instead of shadows, sharp corners instead of rounding. */
    --dcm-radius-sm: 0px;
    --dcm-radius-md: 2px;
    --dcm-radius-lg: 2px;
    --dcm-radius-buttons: 0px;
    --dcm-radius-cards: 2px;

    /* Status pills */
    --dcm-color-status-open: #22c55e;
    --dcm-color-status-closed: #b22234;
    --dcm-color-status-preorder: #3c3b6e;
    --dcm-color-status-coming-soon: #ff5b1f;

    /* Host nav bar — bone surface, ink text, green accent */
    --dct--customized-colors-navBar: #efede4;
    --dcm-color-navbar-bg: #efede4;
    --dcm-header-bg: #efede4;
    --dcm-header-text-color: #0a0a0a;
    --dcm-header-nav-title-text-color: #0a0a0a;
    --dcm-header-border-color: #0a0a0a;
    --dcm-header-shadow: none;
    --dcm-header-divider-color: rgba(10, 10, 10, 0.18);
    --dcm-nav-link-color: #0a0a0a;
    --dcm-nav-link-hover-color: #15803d;
    --dcm-nav-link-active-color: #15803d;
    --dcm-nav-active-border-color: #22c55e;
    --dcm-account-nav-color: #0a0a0a;

    /* Cart pill — empty state bone outline, active state ink w/ green text */
    --dcm-cart-btn-bg-empty: transparent;
    --dcm-cart-btn-text-empty: #0a0a0a;
    --dcm-cart-btn-bg-active: #0a0a0a;
    --dcm-cart-btn-text-active: #22c55e;
    --dcm-cart-btn-border-radius: 0px;

    /* Search input */
    --dcm-search-input-border-color: rgba(10, 10, 10, 0.35);
    --dcm-search-input-border-radius: 0px;
    --dcm-search-input-focus-border-color: #22c55e;
    --dcm-search-input-focus-shadow: 0 0 0 2px rgba(34, 197, 94, 0.3);

    /* Dropdown / popover surfaces */
    --dcm-popover-bg: #f5f3ec;
    --dcm-popover-item-color: #0a0a0a;
    --dcm-popover-item-hover-bg: #e9e7dd;
    --dcm-popover-border-radius: 0px;
    --dcm-popover-shadow: 0 4px 0 rgba(10, 10, 10, 0.1);

    /* Side menu drawer */
    --dcm-drawer-bg: #efede4;
    --dcm-drawer-tab-active-color: #15803d;
    --dcm-drawer-tab-inactive-color: rgba(10, 10, 10, 0.55);
    --dcm-drawer-accent-color: #22c55e;
    --dcm-drawer-nav-heading-color: #15803d;
    --dcm-drawer-nav-link-color: #0a0a0a;

    /* Info bar */
    --dcm-infobar-bg: #0a0a0a;
    --dcm-infobar-text-color: #efede4;
    --dcm-infobar-border-color: #22c55e;

    /* Footer (host-painted bottom rows; our custom <Footer> sits above).
       Painted the same near-black "ink" surface as informationentropy.com's
       own footer so any SDK-rendered legal/privacy row reads as one
       continuous brand surface. */
    --dcm-footer-bg: #0a0a0a;
    --dcm-footer-text-color: #efede4;
    --dcm-privacy-footer-bg: rgba(255, 255, 255, 0.03);
    --dcm-privacy-footer-border-color: rgba(239, 237, 228, 0.13);
    --dcm-privacy-footer-text-color: rgba(239, 237, 228, 0.6);
    --dcm-privacy-footer-text-hover-color: #22c55e;

    /* Banners + skip link */
    --dcm-banner-border-radius: 0px;
    --dcm-skip-link-bg: #22c55e;
    --dcm-skip-link-color: #0a0a0a;

    /* Categories / brands cards */
    --dcm-categories-card-bg: #f5f3ec;
    --dcm-categories-card-border-color: rgba(10, 10, 10, 0.18);
    --dcm-categories-card-text-color: #0a0a0a;
    --dcm-categories-view-all-bg: #0a0a0a;
    --dcm-categories-view-all-color: #22c55e;
    --dcm-brands-card-bg: #f5f3ec;
    --dcm-brands-card-border-color: rgba(10, 10, 10, 0.18);
    --dcm-brands-card-border-radius: 2px;
    --dcm-brands-card-name-color: #0a0a0a;

    /* Carousel chevron buttons */
    --dcm-carousel-btn-bg: #efede4;
    --dcm-carousel-btn-hover-bg: #0a0a0a;
    --dcm-carousel-btn-arrow-color: #0a0a0a;
    --dcm-carousel-btn-color: #0a0a0a;
    --dcm-carousel-btn-shadow: none;

    /* Product (card + detail page) */
    --dcm-product-page-bg: #efede4;
    --dcm-product-name-color: #0a0a0a;
    --dcm-product-brand-color: #15803d;
    --dcm-product-price-color: #0a0a0a;
    --dcm-product-description-color: rgba(10, 10, 10, 0.65);
    --dcm-product-option-bg: #f5f3ec;
    --dcm-product-option-border-color: rgba(10, 10, 10, 0.18);

    /* Cart drawer */
    --dcm-cart-bg: #efede4;
    --dcm-cart-content-bg: #f5f3ec;
    --dcm-cart-text-color: #0a0a0a;
    --dcm-cart-border-color: rgba(10, 10, 10, 0.18);
    --dcm-cart-item-bg: #f5f3ec;
    --dcm-cart-price-color: #0a0a0a;

    /* Filter sidebar */
    --dcm-filter-heading-color: #0a0a0a;
    --dcm-filter-text-color: #0a0a0a;
    --dcm-filter-border-color: rgba(10, 10, 10, 0.18);

    /* Modal */
    --dcm-modal-bg: #f5f3ec;
    --dcm-modal-text-color: #0a0a0a;
    --dcm-modal-border-radius: 2px;
    --dcm-modal-shadow: 0 8px 0 rgba(10, 10, 10, 0.12);

    /* Breadcrumbs + section titles */
    --dcm-breadcrumb-link-color: rgba(10, 10, 10, 0.65);
    --dcm-breadcrumb-active-color: #0a0a0a;
    --dcm-breadcrumb-separator-color: rgba(10, 10, 10, 0.35);
    --dcm-section-title-color: #0a0a0a;
    --dcm-section-subtitle-color: rgba(10, 10, 10, 0.65);

    /* Legacy --dct-* tokens (predate --dcm-*, still feed a handful of
       host surfaces). Set in parity with the modern --dcm-* values. */
    --dct--customized-colors-buttonsLinks: #22c55e;
    --dct--customized-fonts-primary: 'JetBrains Mono', 'SFMono-Regular', Menlo, Consolas, monospace;
    --dct--customized-fonts-secondary: 'Archivo Black', 'Arial Black', sans-serif;
    --dct--customized-maxSiteWidth: 1280px;
    --dct--customized-radius-xs: 0px;
    --dct--customized-radius-sm: 0px;
    --dct--customized-radius-md: 2px;
    --dct--customized-radius-lg: 2px;
    --dct--customized-radius-xl: 2px;
    --dct--customized-radius-tags: 0px;
    --dct--customized-radius-cards: 2px;
    --dct--customized-radius-buttons: 0px;
    --dct--customized-textTransforms-buttons: uppercase;
    --dct--customized-textTransforms-links: none;
    --dct--customized-textTransforms-tags: uppercase;

    /* Extra color base tokens */
    --dcm-color-text-muted: rgba(10, 10, 10, 0.45);
    --dcm-color-border-dark: rgba(10, 10, 10, 0.35);

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

    /* Nav divider */
    --dcm-nav-divider-color: rgba(10, 10, 10, 0.18);

    /* Login nudge */
    --dcm-login-nudge-bg: #f5f3ec;
    --dcm-login-nudge-text-color: #0a0a0a;
    --dcm-login-nudge-link-color: #15803d;
    --dcm-login-nudge-social-btn-bg: #e9e7dd;
    --dcm-login-nudge-shadow: 0 6px 0 rgba(10, 10, 10, 0.12);
    --dcm-login-nudge-close-color: rgba(10, 10, 10, 0.65);
    --dcm-login-nudge-apple-icon-color: #0a0a0a;

    /* Logged-out CTA card */
    --dcm-logged-out-cta-bg: #f5f3ec;
    --dcm-logged-out-cta-border-color: rgba(10, 10, 10, 0.18);
    --dcm-logged-out-cta-border-radius: 2px;
    --dcm-logged-out-cta-text-color: #0a0a0a;
    --dcm-logged-out-cta-subtext-color: rgba(10, 10, 10, 0.65);
    --dcm-logged-out-cta-link-color: #15803d;

    /* User button */
    --dcm-user-btn-color: #0a0a0a;
    --dcm-user-btn-name-color: rgba(10, 10, 10, 0.65);
    --dcm-user-btn-name-border-color: rgba(10, 10, 10, 0.18);

    /* Account popover dropdown */
    --dcm-account-popover-shadow: 0 4px 0 rgba(10, 10, 10, 0.12);
    --dcm-account-popover-border-radius: 0px;
    --dcm-account-popover-logout-color: #15803d;

    /* Status label color */
    --dcm-status-label-color: #0a0a0a;

    /* Drawer extras */
    --dcm-drawer-status-bg: #e9e7dd;
    --dcm-drawer-nav-title-text-color: #0a0a0a;

    /* Footer extras */
    --dcm-footer-bg-sm: #0a0a0a;
    --dcm-footer-border-top: none;
    --dcm-privacy-footer-divider-color: rgba(239, 237, 228, 0.13);
    --dcm-privacy-footer-shadow: none;

    /* Skeleton loaders */
    --dcm-skeleton-bg: #e9e7dd;
    --dcm-skeleton-border-color: rgba(10, 10, 10, 0.18);
    --dcm-skeleton-border-radius: 0px;
    --dcm-skeleton-card-border-radius: 2px;
    --dcm-skeleton-shimmer-from: rgba(10, 10, 10, 0);
    --dcm-skeleton-shimmer-to: rgba(10, 10, 10, 0.06);

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

    /* Categories / brands hover affordances */
    --dcm-categories-card-hover-shadow: none;
    --dcm-brands-title-color: #0a0a0a;
    --dcm-brands-no-results-color: rgba(10, 10, 10, 0.65);
    --dcm-brands-card-shadow: none;
    --dcm-brands-card-hover-shadow: none;
    --dcm-brands-card-placeholder-color: rgba(10, 10, 10, 0.65);
    --dcm-brands-card-placeholder-bg: #e9e7dd;

    /* Product (PDP) extras */
    --dcm-product-subheading-color: #0a0a0a;
    --dcm-product-price-strikethrough-color: rgba(10, 10, 10, 0.45);
    --dcm-product-price-muted-color: rgba(10, 10, 10, 0.65);
    --dcm-product-option-text-color: #0a0a0a;
    --dcm-product-input-bg: #f5f3ec;
    --dcm-product-input-border-color: rgba(10, 10, 10, 0.18);
    --dcm-product-detail-text-color: #0a0a0a;
    --dcm-product-detail-muted-color: rgba(10, 10, 10, 0.65);
    --dcm-product-effect-bg: #e9e7dd;
    --dcm-product-effect-text-color: #0a0a0a;
    --dcm-product-progress-bg: #e9e7dd;
    --dcm-product-progress-fill: #22c55e;
    --dcm-product-accordion-icon-color: #0a0a0a;
    --dcm-product-chip-bg: #e9e7dd;
    --dcm-product-chip-text-color: #0a0a0a;
    --dcm-product-chip-hover-bg: #0a0a0a;

    /* Cart drawer extras */
    --dcm-cart-text-muted-color: rgba(10, 10, 10, 0.65);
    --dcm-cart-item-border-color: rgba(10, 10, 10, 0.18);
    --dcm-cart-item-separator-color: rgba(10, 10, 10, 0.08);
    --dcm-cart-toggle-bg: #e9e7dd;
    --dcm-cart-toggle-active-bg: #22c55e;
    --dcm-cart-backdrop-color: rgba(10, 10, 10, 0.55);

    /* Filter sidebar extras */
    --dcm-filter-icon-color: rgba(10, 10, 10, 0.65);
    --dcm-filter-search-bg: #f5f3ec;
    --dcm-filter-search-border-color: rgba(10, 10, 10, 0.18);
    --dcm-filter-search-text-color: #0a0a0a;
    --dcm-filter-search-placeholder-color: rgba(10, 10, 10, 0.45);
    --dcm-filter-search-icon-color: rgba(10, 10, 10, 0.65);

    /* Modal extras */
    --dcm-modal-backdrop-color: rgba(10, 10, 10, 0.6);
    --dcm-modal-close-color: rgba(10, 10, 10, 0.65);
    --dcm-modal-footer-bg: #e9e7dd;
    --dcm-modal-footer-text-color: #0a0a0a;

    /* Content header */
    --dcm-content-header-text-color: #0a0a0a;
    --dcm-content-header-border-color: rgba(10, 10, 10, 0.18);
    --dcm-content-header-icon-color: #0a0a0a;

    /* Inline categories */
    --dcm-inline-categories-heading-color: #0a0a0a;
    --dcm-inline-categories-divider-color: rgba(10, 10, 10, 0.18);
    --dcm-inline-categories-chip-bg: #e9e7dd;
    --dcm-inline-categories-chip-text-color: #0a0a0a;
    --dcm-inline-categories-chip-border-color: rgba(10, 10, 10, 0.18);
    --dcm-inline-categories-chip-hover-border-color: #22c55e;

    /* Checkout flow */
    --dcm-checkout-heading-color: rgba(10, 10, 10, 0.65);
    --dcm-checkout-section-heading-color: #0a0a0a;
    --dcm-checkout-section-border-color: rgba(10, 10, 10, 0.18);
    --dcm-checkout-text-color: #0a0a0a;
    --dcm-checkout-text-muted-color: rgba(10, 10, 10, 0.65);
    --dcm-checkout-link-color: #15803d;
    --dcm-checkout-input-bg: #f5f3ec;
    --dcm-checkout-input-border-color: rgba(10, 10, 10, 0.18);
    --dcm-checkout-summary-bg: #e9e7dd;
    --dcm-checkout-summary-text-color: #0a0a0a;
    --dcm-checkout-summary-border-color: rgba(10, 10, 10, 0.18);
    --dcm-checkout-summary-total-color: #0a0a0a;
    --dcm-checkout-payment-tab-bg: #f5f3ec;
    --dcm-checkout-payment-tab-border-color: rgba(10, 10, 10, 0.18);
    --dcm-checkout-payment-content-bg: #f5f3ec;
    --dcm-checkout-disclaimer-color: rgba(10, 10, 10, 0.65);
    --dcm-checkout-save-info-bg: #e9e7dd;

    /* Age gate — informationentropy.com uses a bone card on a near-black
       backdrop ("ARE YOU OVER 21?") with a green "YES · ENTER SITE →"
       CTA. Matching its dark backdrop + green accent keeps the very first
       thing a visitor sees on-brand. */
    --dcm-age-gate-body-color: #0a0a0a;
    --dcm-age-gate-link-color: #15803d;
    --dcm-age-gate-backdrop-blur: 0px;

    /* Collections */
    --dcm-collections-description-color: #0a0a0a;
    --dcm-collections-timer-bg: #0a0a0a;
    --dcm-collections-timer-text-color: #22c55e;

    /* Locations browser */
    --dcm-locations-heading-color: #0a0a0a;
    --dcm-locations-text-color: #0a0a0a;
    --dcm-locations-subtext-color: rgba(10, 10, 10, 0.65);
    --dcm-locations-link-color: #15803d;
    --dcm-locations-card-bg: #f5f3ec;
    --dcm-locations-card-border-color: rgba(10, 10, 10, 0.18);
    --dcm-locations-card-text-color: #0a0a0a;
    --dcm-locations-card-hover-bg: #e9e7dd;
    --dcm-locations-card-hover-border-color: #22c55e;
    --dcm-locations-browser-bg: #efede4;
    --dcm-locations-browser-text-color: #0a0a0a;
    --dcm-locations-marker-label-bg: #0a0a0a;
    --dcm-locations-marker-address-color: rgba(239, 237, 228, 0.65);
    --dcm-locations-scrollbar-color: rgba(10, 10, 10, 0.35);
    --dcm-locations-pin-color: #22c55e;
    --dcm-locations-pin-highlight-color: #0a0a0a;
    --dcm-locations-close-hover-bg: #e9e7dd;

    /* Referral / "Invite a friend" flow */
    --dcm-referral-border-color: rgba(10, 10, 10, 0.18);
    --dcm-referral-heading-color: #0a0a0a;
    --dcm-referral-subtext-color: #0a0a0a;
    --dcm-referral-disclaimer-color: rgba(10, 10, 10, 0.65);
    --dcm-referral-disclaimer-underline-color: rgba(10, 10, 10, 0.18);
    --dcm-referral-input-bg: #f5f3ec;
    --dcm-referral-input-text-color: #0a0a0a;
    --dcm-referral-input-border-color: rgba(10, 10, 10, 0.18);
    --dcm-referral-qr-modal-bg: #f5f3ec;
    --dcm-referral-qr-heading-color: #0a0a0a;
    --dcm-referral-qr-text-color: #0a0a0a;
    --dcm-referral-tab-inactive-bg: #e9e7dd;

    /* Account pages */
    --dcm-account-bg: #efede4;
    --dcm-account-surface-bg: #f5f3ec;
    --dcm-account-surface-shadow: rgba(10, 10, 10, 0.08);
    --dcm-account-label-color: rgba(10, 10, 10, 0.65);
    --dcm-account-divider-color: rgba(10, 10, 10, 0.18);
    --dcm-account-icon-fill: #e9e7dd;
    --dcm-account-icon-accent: #22c55e;
    --dcm-account-icon-stroke: #15803d;
  }

  /* Base html/body — applied pre-boot so the page never paints with
     platform defaults before this theme's monospace type + bone/ink
     palette take over. The host SDK also references --dcm-font-primary
     directly on its own elements. */
  html {
    font-family: var(--dcm-font-primary, ui-monospace, monospace);
  }

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

  /* Big display headlines (product names, section titles) read as
     Archivo Black on informationentropy.com rather than the mono body
     face — apply the secondary font wherever the host marks up
     heading-level text explicitly. */
  h1,
  h2,
  h3 {
    font-family: var(--dcm-font-secondary, var(--dcm-font-primary));
    letter-spacing: -0.01em;
  }