/* DESIGN TOKENS: all custom spacing, radii, colours, type weights, font
   families and width limits live here. Vendor CSS keeps its upstream defaults. */
:root {
  --color-bg: #f2efea;
  --color-text: #2b1f1a;
  --color-primary: #2b1f1a;
  --color-on-primary: #f2efea;
  --color-surface: #d8d2c4;
  --color-accent: #d8d2c4;
  --color-muted: #655d55;
  --color-border: #bdb5aa;
  --color-card: #f8f6f2;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-hero-text: #ffffff;
  --color-hero-secondary: #eee6de;
  --color-hero-shade: #17100a;
  --color-transparent: transparent;
  --color-backdrop: rgba(0, 0, 0, 0.4);
  --color-focus: var(--color-primary);
  --color-error: #a73535;
  --color-success: #236548;
  --color-facebook: #1877f2;
  --color-whatsapp: #25d366;
  --color-tiktok: #000000;
  --color-instagram-start: #833ab4;
  --color-instagram-middle: #fd1d1d;
  --color-instagram-end: #fcaf45;
  --font-body: Manrope, Arial, sans-serif;
  --font-heading: Cormorant, Georgia, serif;
  --font-mono: monospace;
  --weight-body: 400;
  --weight-strong: 600;
  --weight-heading: 400;
  --h1-weight: 400;
  --h2-weight: 400;
  --h3-weight: 500;
  --h4-weight: 500;
  --h5-weight: 500;
  --h6-weight: 500;
  --font-xs: 0.68rem;
  --font-small: 0.77rem;
  --font-body-size: 0.875rem;
  --font-lead: 1rem;
  --font-logo: 1.82rem;
  --font-logo-sub: 0.52rem;
  --font-icon: 1.5rem;
  --font-h1: clamp(2.75rem, 6vw, 5.8rem);
  --font-h2: clamp(2.6rem, 4.5vw, 4.4rem);
  --font-h3: 1.7rem;
  --font-h4: 1.4rem;
  --font-h5: 1.15rem;
  --font-h6: 1rem;
  --font-hero: clamp(3.4rem, 6.8vw, 6.7rem);
  --line-body: 1.7;
  --line-heading: 1.04;
  --tracking-wide: 0.19em;
  --tracking-logo: 0.075em;
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 2rem;
  --space-8: 2.5rem;
  --space-9: 3rem;
  --space-10: 4rem;
  --space-11: 5rem;
  --space-12: 6rem;
  --space-negative-1: -0.25rem;
  --radius-0: 0;
  --input-radius: var(--radius-0);
  --button-radius: var(--radius-0);
  --radius-circle: 50%;
  --radius-pill: 999px;
  --width-container: 1360px;
  --width-page: 980px;
  --width-copy: 640px;
  --width-form: 520px;
  --width-dialog: 540px;
  --width-search-dialog: 650px;
  --width-mobile-drawer: 360px;
  --width-cart-drawer: 460px;
  --width-theme-drawer: 380px;
  --width-currency: 300px;
  --width-submenu: 240px;
  --width-submenu-min: 210px;
  --width-fluid: 100%;
  --width-screen: 100vw;
  --width-drawer-max: 94vw;
  --width-logo: 190px;
  --width-logo-mobile: 115px;
  --width-action: 36px;
  --width-action-mobile: 29px;
  --width-cart-image: 82px;
  --width-theme-swatch: 32px;
  --width-control-min: 0;
  --width-button-min: 150px;
  --hero-height-desktop: 700px;
  --hero-height-mobile: 620px;
  --height-header: 98px;
  --height-topbar: 40px;
  --height-control: 52px;
  --height-avatar: 30px;
  --height-social: 30px;
  --width-social: 30px;
  --height-cart-image: 105px;
  --height-submenu-max: 65vh;
  --height-currency-max: 290px;
  --height-product: 360px;
  --height-swatch: 24px;
  --height-mobile-line: 2px;
  --height-empty: 170px;
  --height-pointer: 14px;
  --width-flag: 20px;
  --height-flag: 15px;
  --border-width: 1px;
  --border-focus: 2px;
  --shadow-menu: 0 14px 36px rgba(0, 0, 0, 0.1);
  --shadow-modal: 0 22px 90px rgba(0, 0, 0, 0.18);
  --duration-fast: 180ms;
  --duration: 350ms;
  --duration-slow: 650ms;
  --duration-zoom: 8s;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --hero-overlay-opacity: 0.7;
  --theme-top: 70%;
  --z-theme: 1025;
  --button-padding-y: var(--space-4);
  --button-padding-x: var(--space-6);
  --container-padding: var(--space-9);
  --section-padding: var(--space-11);
  --dropdown-padding: var(--space-3);
  --input-padding: var(--space-4);
  --heading-margin: var(--space-6);
  --footer-column-gap: var(--space-10);
  --nav-gap: var(--space-5);
  --hero-gradient: linear-gradient(
    90deg,
    var(--color-hero-shade) 0%,
    var(--color-hero-shade) 24%,
    transparent 90%
  );
  --bs-body-font-family: var(--font-body);
  --bs-body-color: var(--color-text);
  --bs-body-bg: var(--color-bg);
  --bs-border-radius: var(--radius-0);
  --bs-border-radius-lg: var(--radius-0);
  --bs-border-color: var(--color-border);
}
@media (max-width: 767.98px) {
  :root {
    --container-padding: var(--space-5);
    --section-padding: var(--space-10);
    --height-product: 240px;
    --footer-column-gap: var(--space-0);
    --nav-gap: var(--space-1);
    --height-header: 80px;
    --font-h3: 1.4rem;
    --font-hero: 3.75rem;
  }
}
@media (max-width: 374.98px) {
  :root {
    --container-padding: var(--space-3);
    --width-logo-mobile: 98px;
    --width-action-mobile: 27px;
    --font-hero: 3.15rem;
  }
}
