:root:root {
    /* Fonts — system sans stack (no remote font loading needed) */
    --dcm-font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --dcm-font-secondary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    /* Content rail */
    --dct--customized-maxSiteWidth: 1320px;
    --dcm-header-max-width: 1320px;

    /* ============================================================
       Host nav bar — dark navy chrome, white text.
       ============================================================ */
    --dct--customized-colors-navBar: #111A2E;
    --dcm-color-navbar-bg: #111A2E;
    --dcm-header-bg: #111A2E;
    --dcm-header-shadow: none;
    --dcm-header-border-color: rgba(255, 255, 255, 0.12);
    --dcm-header-border-width: 1px;
    --dcm-header-divider-color: rgba(255, 255, 255, 0.12);
    --dcm-header-text-color: #FFFFFF;
    --dcm-header-nav-title-text-color: #FFFFFF;
    --dcm-header-mobile-menu-btn-font-weight: 700;

    /* Top-level nav links */
    --dcm-nav-link-color: #FFFFFF;
    --dcm-nav-link-hover-color: #59BCAF;
    --dcm-nav-link-active-color: #59BCAF;
    --dcm-nav-link-font-weight: 600;
    --dcm-nav-active-border-color: #59BCAF;
    --dcm-nav-divider-color: rgba(255, 255, 255, 0.12);
    --dcm-account-nav-color: #FFFFFF;

    /* Cart pill — teal, pill-shaped */
    --dcm-cart-btn-bg-empty: rgba(255, 255, 255, 0.1);
    --dcm-cart-btn-text-empty: #FFFFFF;
    --dcm-cart-btn-bg-active: #59BCAF;
    --dcm-cart-btn-text-active: #0F1729;
    --dcm-cart-btn-border-radius: 9999px;

    /* Status badges */
    --dcm-color-status-open: #4ADE80;
    --dcm-color-status-closed: #DC2626;
    --dcm-color-status-preorder: #F97316;
    --dcm-color-status-coming-soon: #FFFFFF;
    --dcm-status-label-color: #FFFFFF;

    /* Sub-header strip on internal pages */
    --dcm-content-header-text-color: #FFFFFF;
    --dcm-content-header-border-color: rgba(255, 255, 255, 0.12);
    --dcm-content-header-icon-color: #FFFFFF;

    /* Page / body backgrounds */
    --dcm-color-body-bg: #0F1729;
    --dcm-product-page-bg: #0F1729;

    /* Brand color drives default buttons/links across the SDK. Dark
       text on the light-teal button reads better than white. */
    --dcm-color-primary: #59BCAF;
    --dcm-color-focus: #59BCAF;
    --dcm-color-focus-shadow: rgba(89, 188, 175, 0.35);

    /* Surfaces */
    --dcm-color-surface: #222D45;
    --dcm-color-surface-hover: #2B3856;
    --dcm-color-surface-muted: rgba(255, 255, 255, 0.05);

    /* Text */
    --dcm-color-text-primary: #FFFFFF;
    --dcm-color-text-secondary: rgba(255, 255, 255, 0.7);
    --dcm-color-text-muted: rgba(255, 255, 255, 0.5);
    --dcm-color-text-inverted: #0F1729;

    /* Borders */
    --dcm-color-border: rgba(255, 255, 255, 0.12);
    --dcm-color-border-dark: rgba(255, 255, 255, 0.24);

    /* Border radius — rounded, pill buttons, ~12-16px cards */
    --dcm-radius-sm: 6px;
    --dcm-radius-md: 10px;
    --dcm-radius-lg: 14px;
    --dcm-radius-buttons: 9999px;
    --dcm-radius-cards: 12px;
    --dcm-banner-border-radius: 12px;
    --dcm-brands-card-border-radius: 12px;
    --dcm-popover-border-radius: 10px;
    --dcm-modal-border-radius: 14px;
    --dcm-search-input-border-radius: 9999px;

    /* Search input */
    --dcm-search-input-border-color: rgba(255, 255, 255, 0.12);
    --dcm-search-input-focus-border-color: #59BCAF;
    --dcm-search-input-focus-shadow: rgba(89, 188, 175, 0.25);

    /* Cart drawer — dark navy panel, white text */
    --dcm-cart-bg: #111A2E;
    --dcm-cart-content-bg: #0F1729;
    --dcm-cart-text-color: #FFFFFF;
    --dcm-cart-text-muted-color: rgba(255, 255, 255, 0.7);
    --dcm-cart-border-color: rgba(255, 255, 255, 0.12);
    --dcm-cart-item-bg: #222D45;
    --dcm-cart-item-border-color: rgba(255, 255, 255, 0.12);
    --dcm-cart-item-separator-color: rgba(255, 255, 255, 0.12);
    --dcm-cart-price-color: #FFFFFF;
    --dcm-cart-toggle-bg: rgba(255, 255, 255, 0.05);
    --dcm-cart-toggle-active-bg: #222D45;
    --dcm-cart-backdrop-color: rgba(0, 0, 0, 0.65);

    /* Drawers / modals / popovers */
    --dcm-drawer-bg: #111A2E;
    --dcm-drawer-tab-active-color: #59BCAF;
    --dcm-drawer-tab-inactive-color: rgba(255, 255, 255, 0.5);
    --dcm-drawer-accent-color: #59BCAF;
    --dcm-drawer-nav-heading-color: #FFFFFF;
    --dcm-drawer-nav-link-color: #FFFFFF;
    --dcm-modal-bg: #111A2E;
    --dcm-modal-text-color: #FFFFFF;
    --dcm-modal-footer-bg: #0A101C;
    --dcm-modal-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    --dcm-popover-bg: #222D45;
    --dcm-popover-item-color: #FFFFFF;
    --dcm-popover-item-hover-bg: #2B3856;
    --dcm-popover-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);

    /* Login nudge */
    --dcm-login-nudge-bg: #222D45;
    --dcm-login-nudge-text-color: #FFFFFF;
    --dcm-login-nudge-link-color: #59BCAF;

    /* Info bar — orange strip, white text */
    --dcm-infobar-bg: #F97316;
    --dcm-infobar-text-color: #FFFFFF;
    --dcm-infobar-border-color: rgba(255, 255, 255, 0.2);

    /* Categories & brands cards — translucent navy surfaces, rounded */
    --dcm-categories-card-bg: #222D45;
    --dcm-categories-card-border-color: rgba(255, 255, 255, 0.12);
    --dcm-categories-card-text-color: #FFFFFF;
    --dcm-categories-view-all-bg: #59BCAF;
    --dcm-brands-card-bg: #222D45;
    --dcm-brands-card-border-color: rgba(255, 255, 255, 0.12);
    --dcm-brands-card-name-color: #FFFFFF;

    /* Product detail page */
    --dcm-product-name-color: #FFFFFF;
    --dcm-product-brand-color: rgba(255, 255, 255, 0.7);
    --dcm-product-price-color: #FFFFFF;
    --dcm-product-description-color: rgba(255, 255, 255, 0.85);
    --dcm-product-option-bg: #222D45;
    --dcm-product-option-border-color: rgba(255, 255, 255, 0.12);
    --dcm-product-option-text-color: #FFFFFF;
    --dcm-product-effect-bg: rgba(255, 255, 255, 0.1);
    --dcm-product-effect-text-color: #FFFFFF;

    /* Inline categories chips */
    --dcm-inline-categories-chip-bg: rgba(255, 255, 255, 0.1);

    /* Checkout */
    --dcm-checkout-input-bg: #222D45;
    --dcm-checkout-summary-bg: #111A2E;
    --dcm-checkout-payment-tab-bg: rgba(255, 255, 255, 0.05);
    --dcm-checkout-payment-content-bg: #0F1729;
    --dcm-checkout-save-info-bg: rgba(255, 255, 255, 0.05);
    --dcm-checkout-heading-color: #FFFFFF;
    --dcm-checkout-text-color: #FFFFFF;

    /* Skeleton shimmer */
    --dcm-skeleton-bg: #222D45;
    --dcm-skeleton-border-color: rgba(255, 255, 255, 0.12);
    --dcm-skeleton-shimmer-from: rgba(255, 255, 255, 0);
    --dcm-skeleton-shimmer-to: rgba(255, 255, 255, 0.12);

    /* Filter chrome (host fallback / mobile filter surfaces that still
       use --dcm-filter-*, since the custom FilterSidePanel registry slot
       below only replaces the desktop sidebar). Headings/labels white,
       secondary text translucent white, borders translucent white,
       search input a navy surface with a teal focus ring — consistent
       with the dark chrome and the custom panel's own styling. */
    --dcm-filter-heading-color: #FFFFFF;
    --dcm-filter-text-color: rgba(255, 255, 255, 0.8);
    --dcm-filter-border-color: rgba(255, 255, 255, 0.12);
    --dcm-filter-icon-color: rgba(255, 255, 255, 0.6);
    --dcm-filter-search-bg: #222D45;
    --dcm-filter-search-border-color: rgba(255, 255, 255, 0.12);
    --dcm-filter-search-text-color: #FFFFFF;
    --dcm-filter-search-placeholder-color: rgba(255, 255, 255, 0.5);
    --dcm-filter-search-icon-color: rgba(255, 255, 255, 0.6);
    --dcm-filter-search-focus-border-color: #59BCAF;
    --dcm-filter-search-focus-shadow: rgba(89, 188, 175, 0.25);

    /* Logged-out CTA */
    --dcm-logged-out-cta-bg: #222D45;

    /* Footer — near-black navy inverted block */
    --dcm-footer-bg: #0A101C;
    --dcm-footer-text-color: #FFFFFF;
    --dcm-privacy-footer-bg: #0A101C;
    --dcm-privacy-footer-border-color: rgba(255, 255, 255, 0.12);
    --dcm-privacy-footer-text-color: rgba(255, 255, 255, 0.5);
    --dcm-privacy-footer-text-hover-color: #59BCAF;

    /* Carousel navigation */
    --dcm-carousel-btn-bg: #222D45;
    --dcm-carousel-btn-hover-bg: #59BCAF;
    --dcm-carousel-btn-arrow-color: #FFFFFF;

    /* Section titles */
    --dcm-section-title-color: #FFFFFF;
    --dcm-section-subtitle-color: rgba(255, 255, 255, 0.7);

    /* Breadcrumbs */
    --dcm-breadcrumb-link-color: rgba(255, 255, 255, 0.7);
    --dcm-breadcrumb-active-color: #FFFFFF;
  }

  body {
    background: #0F1729;
    color: #FFFFFF;
  }