/**
 * Dollar Shape Club — Master Design System V1.1
 * Soft. Sophisticated. Distinctive.
 * Loaded after main.css so components inherit the new palette/type.
 */

:root {
  /* —— V1.1 Brand —— */
  --dsc-lilac: #BE8BBD;
  --dsc-champagne: #EAD0B6;
  --dsc-ivory: #F8F5ED;
  --dsc-forest: #123F32;

  /* —— V1.1 Support —— */
  --dsc-sage: #718B55;
  --dsc-cuppy-pink: #EFA4B9;
  --dsc-marine: #55BFD1;
  --dsc-lavender: #B6A5D4;

  /* Signature gradient (sparingly) */
  --dsc-gradient-signature: linear-gradient(135deg, #EAD0B6 0%, #BE8BBD 100%);

  /* —— Semantic UI —— */
  --dsc-white: #FFFFFF;
  --dsc-charcoal: var(--dsc-forest);
  --dsc-text: #1A3A30;
  --dsc-muted: #5A6B64;
  --dsc-border: #E4DDD0;
  --dsc-border-soft: #F0EBE1;

  --dsc-success: var(--dsc-sage);
  --dsc-warning: #B9843B;
  --dsc-error: #B94A52;

  /* Section rhythm */
  --dsc-band-white: var(--dsc-ivory);
  --dsc-band-pale: var(--dsc-champagne);
  --dsc-band-deep: var(--dsc-forest);
  --dsc-section-y: clamp(3.75rem, 6vw, 5.5rem);
  --dsc-section-y-tight: clamp(2.75rem, 4vw, 3.75rem);

  /* Typography */
  --font-display: "DM Serif Display", "Cormorant Garamond", Georgia, serif;
  --font-body: "Manrope", "DM Sans", system-ui, -apple-system, sans-serif;
  --font-accent: var(--font-body);

  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 17px;
  --text-lg: 20px;
  --text-xl: 24px;
  --text-2xl: 32px;
  --text-3xl: 40px;
  --text-4xl: 52px;
  --text-5xl: 64px;
  --text-6xl: 80px;

  --mobile-h1: 42px;
  --mobile-h2: 34px;
  --mobile-h3: 26px;
  --mobile-body: 16px;

  /* Layout */
  --dsc-container: 1440px;
  --dsc-reading-width: 720px;
  --wrap: min(1280px, calc(100% - 64px));
  --page-pad: 32px;
  --page-pad-lg: 48px;
  --page-pad-tablet: 24px;
  --page-pad-mobile: 20px;

  /* Radius */
  --dsc-radius-sm: 8px;
  --dsc-radius-md: 16px;
  --dsc-radius-lg: 24px;
  --dsc-radius-xl: 24px;
  --dsc-radius-pill: 999px;
  --radius-btn: var(--dsc-radius-pill);
  --radius-media: 20px;
  --radius-media-sm: var(--dsc-radius-lg);

  /* Spacing scale */
  --dsc-space-1: 4px;
  --dsc-space-2: 8px;
  --dsc-space-3: 12px;
  --dsc-space-4: 16px;
  --dsc-space-5: 24px;
  --dsc-space-6: 32px;
  --dsc-space-7: 48px;
  --dsc-space-8: 64px;
  --dsc-space-9: 80px;
  --dsc-space-10: 96px;
  --dsc-space-11: 120px;
  --dsc-space-12: 160px;

  /* Shadows — soft, not SaaS */
  --dsc-shadow-soft: 0 10px 36px rgba(18, 63, 50, 0.06);
  --dsc-shadow-hover: 0 14px 44px rgba(18, 63, 50, 0.1);

  /* Chrome */
  --header-h: 96px;
  --announce-h: 40px;
  --ease-ui: 220ms ease;

  /*
   * Back-compat aliases for v1.0 aqua/coral consumers.
   * Prefer --dsc-forest / --dsc-lilac / --dsc-champagne / --dsc-ivory in new code.
   */
  --dsc-aqua: var(--dsc-marine);
  --dsc-aqua-mid: #3A9EA3;
  --dsc-aqua-light: #F3F0E8;
  --dsc-aqua-deep: var(--dsc-forest);
  --dsc-aqua-dark: var(--dsc-champagne);

  --dsc-coral: var(--dsc-cuppy-pink);
  --dsc-coral-dark: #D9849C;
  --dsc-coral-light: #FDF0F4;

  --dsc-cream: var(--dsc-ivory);

  --dsc-accent: var(--dsc-lilac);
  --dsc-accent-deep: var(--dsc-forest);
  --dsc-green: var(--dsc-sage);
  --dsc-mint: var(--dsc-ivory);
  --dsc-aqua-bg: var(--dsc-ivory);
  --dsc-sand: var(--dsc-champagne);
  --dsc-blush: var(--dsc-coral-light);
  --dsc-pink: var(--dsc-cuppy-pink);
  --dsc-pink-deep: var(--dsc-coral-dark);
  --dsc-text-soft: var(--dsc-muted);
  --dsc-line: var(--dsc-border);
  --dsc-olive: var(--dsc-forest);
  --dsc-olive-soft: var(--dsc-sage);
  --dsc-cream-card: var(--dsc-ivory);
  --dsc-ink: var(--dsc-forest);
}

@media (max-width: 1023px) {
  :root {
    --wrap: min(1280px, calc(100% - 48px));
    --page-pad: 24px;
    --header-h: 72px;
    --announce-h: 40px;
  }
}

@media (max-width: 767px) {
  :root {
    --wrap: min(1280px, calc(100% - 40px));
    --page-pad: 20px;
    --announce-h: 38px;
    --header-h: 56px;
  }
}

/* Global type + canvas */
body.dsc-home,
body.dsc-branded,
body:not(.dsc-home) {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--dsc-text);
  background: var(--dsc-ivory);
}

body.elementor-kit-11 {
  --e-global-typography-primary-font-family: "DM Serif Display", Georgia, serif;
  --e-global-typography-secondary-font-family: "Manrope", sans-serif;
  --e-global-typography-text-font-family: "Manrope", sans-serif;
  --e-global-typography-accent-font-family: "Manrope", sans-serif;
  --e-global-color-primary: #123F32;
  --e-global-color-secondary: #BE8BBD;
  --e-global-color-text: #1A3A30;
  --e-global-color-accent: #EAD0B6;
}

h1, h2, h3,
.dsc-hero-slide h1,
.dsc-hero-slide h2,
.dsc-section h2,
.dsc-bestsellers__intro h2,
.dsc-featured__intro h2,
.dsc-compare__title,
.dsc-reviews-media__title,
.dsc-awards__title,
.dsc-quiz h2,
.dsc-glow-promo h2,
.dsc-offer h2,
.dsc-instagram h2,
.dsc-trust__title,
.dsc-pdp-title,
.entry-title,
.woocommerce-loop-product__title,
.page-title,
.woocommerce-products-header__title {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--dsc-forest);
  letter-spacing: 0;
}

/* Deep / forest surfaces keep light type */
.dsc-band--deep h1,
.dsc-band--deep h2,
.dsc-band--deep h3,
.dsc-section--deep h1,
.dsc-section--deep h2,
.dsc-section--deep h3,
.dsc-close-cta h2,
.dsc-footer h1,
.dsc-footer h2,
.dsc-footer h3 {
  color: var(--dsc-ivory) !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}