:root:root {
    /* ---- Brand colors ---- */
    --dcm-color-primary: #BABAFB;
    --dcm-color-body-bg: #FFFFFF;
    --dcm-color-surface: #FFFFFF;
    --dcm-color-surface-hover: #EAEAEB;
    --dcm-color-surface-muted: #F4F4F5;
    --dcm-color-text-primary: #151517;
    --dcm-color-text-secondary: #5C5C5C;
    --dcm-color-text-inverted: #151517;
    --dcm-color-border: #E6E6E6;
    --dcm-color-focus: #01ECEC;
    --dcm-color-focus-shadow: rgba(1, 236, 236, 0.4);
    --dcm-color-accent: #01ECEC;

    /* ---- Typography ---- */
    --dcm-font-primary: 'NewBlack Typeface', sans-serif;
    --dcm-font-secondary: -apple-system, 'system-ui', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    /* ---- Radius ---- */
    --dcm-radius-sm: 4px;
    --dcm-radius-md: 8px;
    --dcm-radius-lg: 12px;
    --dcm-radius-buttons: 75px;
    --dcm-radius-cards: 12px;

    /* ---- Product ---- */
    --dcm-product-name-color: #151517;
    --dcm-product-brand-color: #646D73;
    --dcm-product-price-color: #151517;
    --dcm-product-description-color: #5C5C5C;

    /* ---- Cart button ---- */
    --dcm-cart-btn-bg-active: #01ECEC;
    --dcm-cart-btn-bg-empty: transparent;
    --dcm-cart-btn-text-empty: #01ECEC;

    /* ---- Categories / Brands cards ---- */
    --dcm-categories-card-bg: #FFFFFF;
    --dcm-categories-card-border-color: #E6E6E6;
    --dcm-categories-card-text-color: #151517;
    --dcm-brands-card-bg: #FFFFFF;
    --dcm-brands-card-border-color: #E6E6E6;
    --dcm-brands-card-name-color: #151517;

    /* ---- Modal (login/register form, and other platform modals) ---- */
    --dcm-modal-bg: #FFFFFF;
    --dcm-modal-text-color: #151517;
    --dcm-modal-border-radius: 12px;
    --dcm-modal-shadow: 0 12px 32px 0 rgba(0, 0, 0, 0.18);

    /* ---- Login Nudge ---- */
    --dcm-login-nudge-social-btn-bg: #F4F4F5;
    --dcm-login-nudge-close-color: #646D73;
    --dcm-login-nudge-apple-icon-color: #151517;
    --dcm-login-nudge-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.15);

    /* ---- Tokens that replace former host-class overrides ---- */
    --dcm-banner-border-radius: 12px;
    --dcm-section-title-color: #151517;
    --dcm-carousel-btn-bg: #FFFFFF;
    --dcm-carousel-btn-hover-bg: #EAEAEB;
    --dcm-carousel-btn-arrow-color: #151517;
    --dcm-login-nudge-bg: #1B1230;
    --dcm-login-nudge-text-color: #F5F5F5;
    --dcm-login-nudge-link-color: #FFFFFF;
    --dcm-product-page-bg: #FFFFFF;
    --dcm-breadcrumb-link-color: #5C5C5C;
    --dcm-breadcrumb-active-color: #151517;

    /* ---- Account Popover ---- */
    --dcm-account-popover-item-color: #151517;
    --dcm-account-popover-hover-bg: #F4F4F5;
    --dcm-account-popover-divider-color: #E6E6E6;
    --dcm-account-popover-logout-color: #5A5AD8;
  }

  @font-face {
    font-family: 'NewBlack Typeface';
    src: url('https://extensions.hello-jade.dutchie.partners/static/css/assets/NewBlackTypeface-UltraLight.58cd22b5.woff2') format('woff2'),
         url('https://extensions.hello-jade.dutchie.partners/static/css/assets/NewBlackTypeface-UltraLight.a8be064f.woff') format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'NewBlack Typeface';
    src: url('https://extensions.hello-jade.dutchie.partners/static/css/assets/NewBlackTypeface-Light.57114d4c.woff2') format('woff2'),
         url('https://extensions.hello-jade.dutchie.partners/static/css/assets/NewBlackTypeface-Light.7116426b.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'NewBlack Typeface';
    src: url('https://extensions.hello-jade.dutchie.partners/static/css/assets/NewBlackTypeface-Regular.a8d8d4e8.woff2') format('woff2'),
         url('https://extensions.hello-jade.dutchie.partners/static/css/assets/NewBlackTypeface-Regular.a7bc7ebe.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'NewBlack Typeface';
    src: url('https://extensions.hello-jade.dutchie.partners/static/css/assets/NewBlackTypeface-Medium.8e3d21ff.woff2') format('woff2'),
         url('https://extensions.hello-jade.dutchie.partners/static/css/assets/NewBlackTypeface-Medium.8d0b5403.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'NewBlack Typeface';
    src: url('https://extensions.hello-jade.dutchie.partners/static/css/assets/NewBlackTypeface-SemiBold.53ea2635.woff2') format('woff2'),
         url('https://extensions.hello-jade.dutchie.partners/static/css/assets/NewBlackTypeface-SemiBold.36c12f1e.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'NewBlack Typeface';
    src: url('https://extensions.hello-jade.dutchie.partners/static/css/assets/NewBlackTypeface-Bold.7550f977.woff2') format('woff2'),
         url('https://extensions.hello-jade.dutchie.partners/static/css/assets/NewBlackTypeface-Bold.d84e6ce2.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'NewBlack Typeface';
    src: url('https://extensions.hello-jade.dutchie.partners/static/css/assets/NewBlackTypeface-ExtraBold.2d60d797.woff2') format('woff2'),
         url('https://extensions.hello-jade.dutchie.partners/static/css/assets/NewBlackTypeface-ExtraBold.ee08f777.woff') format('woff');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
  }

  /* Grotap — bold condensed display font for section headlines only
     (e.g. "CATEGORIES", "OFFERS", collection card titles). Not the
     site's general heading font — that's still NewBlack Typeface above. */
  @font-face {
    font-family: 'Grotap';
    src: url('https://extensions.hello-jade.dutchie.partners/static/css/assets/Grotap-ExtraBold.3b8f272a.woff2') format('woff2'),
         url('https://extensions.hello-jade.dutchie.partners/static/css/assets/Grotap-ExtraBold.b88da8d8.woff') format('woff');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'Grotap';
    src: url('https://extensions.hello-jade.dutchie.partners/static/css/assets/Grotap-Black.ead5144b.woff2') format('woff2'),
         url('https://extensions.hello-jade.dutchie.partners/static/css/assets/Grotap-Black.935dca01.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
  }

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