/* Generated from Figma Variables. First mode = :root default.
   FLOAT tokens are unitless — multiply by 1px in calc() where a length is needed. */

:root {
  --accent-500: var(--colors-brand-pink-500-base); /* @kind color */
  --button-background-disabled-2: var(--surface-disabled); /* @kind color */
  --button-background-disabled-3: var(--surface-disabled); /* @kind color */
  --button-background-disabled: var(--surface-disabled); /* @kind color */
  --button-background-primary-default-2: var(--surface-primary); /* @kind color */
  --button-background-primary-default: var(--surface-primary); /* @kind color */
  --button-background-primary-disabled-2: var(--surface-brand-light); /* @kind color */
  --button-background-primary-disabled-3: var(--surface-brand-light); /* @kind color */
  --button-background-primary-disabled: var(--surface-brand-light); /* @kind color */
  --button-background-primary-hover-2: var(--surface-brand-primary-hover); /* @kind color */
  --button-background-primary-hover-3: var(--surface-brand-primary-hover); /* @kind color */
  --button-background-primary-hover: var(--surface-brand-primary-hover); /* @kind color */
  --button-background-primary-inverse-default-2: var(--surface-base); /* @kind color */
  --button-background-primary-inverse-default: var(--surface-base); /* @kind color */
  --button-background-primary-inverse-hover-2: var(--surface-brand-extra-light); /* @kind color */
  --button-background-primary-inverse-hover-3: var(--surface-brand-extra-light); /* @kind color */
  --button-background-primary-inverse-hover-4: var(--surface-brand-extra-light); /* @kind color */
  --button-background-primary-inverse-hover: var(--surface-brand-extra-light); /* @kind color */
  --button-background-primary-inverse-pressed-2: var(--surface-brand-inverse-pressed); /* @kind color */
  --button-background-primary-inverse-pressed-3: var(--surface-brand-inverse-pressed); /* @kind color */
  --button-background-primary-inverse-pressed-4: var(--surface-brand-inverse-pressed); /* @kind color */
  --button-background-primary-inverse-pressed: var(--surface-brand-inverse-pressed); /* @kind color */
  --button-background-primary-inverse-rest: var(--surface-base); /* @kind color */
  --button-background-primary-pressed-2: var(--surface-brand-primary-pressed); /* @kind color */
  --button-background-primary-pressed-3: var(--surface-brand-primary-pressed); /* @kind color */
  --button-background-primary-pressed: var(--surface-brand-primary-pressed); /* @kind color */
  --button-background-primary-rest: var(--surface-primary); /* @kind color */
  --button-background-secondary-default-2: var(--surface-base-extra-dark); /* @kind color */
  --button-background-secondary-default: var(--surface-base-extra-dark); /* @kind color */
  --button-background-secondary-hover-2: var(--surface-brand-tertiary); /* @kind color */
  --button-background-secondary-hover-3: var(--surface-brand-tertiary); /* @kind color */
  --button-background-secondary-hover-4: var(--surface-brand-tertiary); /* @kind color */
  --button-background-secondary-hover: var(--surface-brand-tertiary); /* @kind color */
  --button-background-secondary-pressed-2: var(--content-tertiary); /* @kind color */
  --button-background-secondary-pressed-3: var(--content-tertiary); /* @kind color */
  --button-background-secondary-pressed: var(--content-tertiary); /* @kind color */
  --button-background-secondary-rest: var(--surface-base-extra-dark); /* @kind color */
  --button-border-tertiary-hover: var(--surface-brand-tertiary); /* @kind color */
  --button-border-tertiary-inverse-hover: var(--surface-brand-extra-light); /* @kind color */
  --button-border-tertiary-inverse-pressed: var(--surface-brand-inverse-pressed); /* @kind color */
  --button-border-tertiary-inverse-rest: var(--content-primary-white); /* @kind color */
  --button-border-tertiary-pressed: var(--content-tertiary); /* @kind color */
  --button-border-tertiary-rest: var(--content-primary); /* @kind color */
  --button-foreground-disabled-2: var(--content-quaternary); /* @kind color */
  --button-foreground-disabled-3: var(--content-quaternary); /* @kind color */
  --button-foreground-disabled-4: var(--content-quaternary); /* @kind color */
  --button-foreground-disabled: var(--content-quaternary); /* @kind color */
  --button-foreground-on-brand-disabled-2: var(--content-on-brand-disabled); /* @kind color */
  --button-foreground-on-brand-disabled-3: var(--content-on-brand-disabled); /* @kind color */
  --button-foreground-on-brand-disabled: var(--content-on-brand-disabled); /* @kind color */
  --button-foreground-on-primary-2: var(--content-primary-white); /* @kind color */
  --button-foreground-on-primary-3: var(--content-primary-white); /* @kind color */
  --button-foreground-on-primary-inverse-2: var(--content-primary); /* @kind color */
  --button-foreground-on-primary-inverse-3: var(--content-primary); /* @kind color */
  --button-foreground-on-primary-inverse: var(--content-primary); /* @kind color */
  --button-foreground-on-primary: var(--content-primary-white); /* @kind color */
  --button-foreground-on-secondary-2: var(--content-primary-white); /* @kind color */
  --button-foreground-on-secondary-3: var(--content-primary-white); /* @kind color */
  --button-foreground-on-secondary: var(--content-primary-white); /* @kind color */
  --button-foreground-tertiary-hover-2: var(--surface-brand-tertiary); /* @kind color */
  --button-foreground-tertiary-hover-3: var(--content-quaternary); /* @kind color */
  --button-foreground-tertiary-hover: var(--content-quaternary); /* @kind color */
  --button-foreground-tertiary-inverse-hover-2: var(--surface-brand-extra-light); /* @kind color */
  --button-foreground-tertiary-inverse-hover-3: var(--content-inverse); /* @kind color */
  --button-foreground-tertiary-inverse-hover: var(--content-inverse); /* @kind color */
  --button-foreground-tertiary-inverse-on-tertiary-2: var(--content-primary-white); /* @kind color */
  --button-foreground-tertiary-inverse-on-tertiary-3: var(--content-primary-white); /* @kind color */
  --button-foreground-tertiary-inverse-on-tertiary: var(--content-primary-white); /* @kind color */
  --button-foreground-tertiary-inverse-pressed-2: var(--surface-brand-inverse-pressed); /* @kind color */
  --button-foreground-tertiary-inverse-pressed-3: var(--content-brand-inverse); /* @kind color */
  --button-foreground-tertiary-inverse-pressed: var(--content-brand-inverse); /* @kind color */
  --button-foreground-tertiary-on-tertiary-2: var(--content-primary); /* @kind color */
  --button-foreground-tertiary-on-tertiary-3: var(--content-primary); /* @kind color */
  --button-foreground-tertiary-on-tertiary: var(--content-primary); /* @kind color */
  --button-foreground-tertiary-pressed-2: var(--content-tertiary); /* @kind color */
  --button-foreground-tertiary-pressed-3: var(--content-tertiary); /* @kind color */
  --button-foreground-tertiary-pressed: var(--content-tertiary); /* @kind color */
  --button-radius-2: var(--radius-sm);
  --button-radius-3: var(--radius-sm);
  --button-radius: var(--radius-sm);
  --colors-brand-pink-500-base: rgb(245,29,132); /* @kind color */
  --colors-brand-rose-500-base: rgb(245,228,229); /* @kind color */
  --colors-ff-crimson-400: rgb(230,61,103); /* @kind color */
  --colors-ff-crimson-500: rgb(202,2,51); /* @kind color */
  --colors-ff-crimson-600: rgb(176,0,45); /* @kind color */
  --colors-ff-crimson-800: rgb(112,0,27); /* @kind color */
  --colors-ff-maroon-50: rgb(255,242,242); /* @kind color */
  --colors-ff-maroon-600: rgb(118,0,0); /* @kind color */
  --colors-ff-neutral-0: rgb(255,255,255); /* @kind color */
  --colors-ff-neutral-200: rgb(226,226,226); /* @kind color */
  --colors-ff-neutral-300: rgb(200,200,200); /* @kind color */
  --colors-ff-neutral-400: rgb(168,168,168); /* @kind color */
  --colors-ff-neutral-500: rgb(140,140,140); /* @kind color */
  --colors-ff-neutral-50: rgb(248,247,247); /* @kind color */
  --colors-ff-neutral-600: rgb(112,112,112); /* @kind color */
  --colors-ff-neutral-800: rgb(52,52,52); /* @kind color */
  --colors-ff-neutral-900: rgb(28,28,28); /* @kind color */
  --colors-ff-tan-100: rgb(244,232,227); /* @kind color */
  --colors-ff-tan-900: rgb(36,25,22); /* @kind color */
  --colors-neatural-grayscale-50: rgb(255,255,255); /* @kind color */
  --colors-neatural-grayscale-800-base: rgb(45,45,45); /* @kind color */
  --colors-neatural-grayscale-900: rgb(26,26,26); /* @kind color */
  --colors-sf-grayscale-200: rgb(230,230,230); /* @kind color */
  --colors-sf-grayscale-400: rgb(176,176,176); /* @kind color */
  --colors-sf-grayscale-500: rgb(140,140,140); /* @kind color */
  --colors-sf-grayscale-50: rgb(255,255,255); /* @kind color */
  --colors-sf-grayscale-600: rgb(104,104,104); /* @kind color */
  --colors-sf-grayscale-800-base: rgb(45,45,45); /* @kind color */
  --colors-sf-grayscale-900: rgb(26,26,26); /* @kind color */
  --colors-sf-pink-350: rgb(242,106,169); /* @kind color */
  --colors-sf-pink-500-base: rgb(245,29,132); /* @kind color */
  --colors-sf-pink-700: rgb(187,0,99); /* @kind color */
  --colors-sf-pink-750: rgb(151,16,79); /* @kind color */
  --colors-sf-pink-900: rgb(92,0,48); /* @kind color */
  --colors-sf-rose-100: rgb(248,242,242); /* @kind color */
  --colors-sf-rose-200: rgb(247,238,239); /* @kind color */
  --colors-sf-rose-500-base: rgb(245,228,229); /* @kind color */
  --colors-sf-rose-50: rgb(249,245,245); /* @kind color */
  --colors-sf-rose-800: rgb(205,196,197); /* @kind color */
  --colors-sf-yellow-500: rgb(245,124,0); /* @kind color */
  --content-accent: var(--colors-sf-pink-500-base); /* @kind color */
  --content-brand-inverse: var(--colors-sf-rose-100); /* @kind color */
  --content-brand-light: var(--colors-sf-rose-500-base); /* @kind color */
  --content-inverse: var(--colors-sf-rose-50); /* @kind color */
  --content-on-brand-disabled-2: var(--colors-sf-rose-800); /* @kind color */
  --content-on-brand-disabled: var(--colors-sf-rose-800); /* @kind color */
  --content-primary-2: var(--colors-sf-grayscale-900); /* @kind color */
  --content-primary-3: var(--colors-sf-grayscale-900); /* @kind color */
  --content-primary-white-2: var(--colors-sf-grayscale-50); /* @kind color */
  --content-primary-white-3: var(--colors-sf-grayscale-50); /* @kind color */
  --content-primary-white: var(--colors-sf-grayscale-50); /* @kind color */
  --content-primary: var(--colors-sf-grayscale-900); /* @kind color */
  --content-quaternary-2: var(--colors-sf-grayscale-400); /* @kind color */
  --content-quaternary: var(--colors-sf-grayscale-400); /* @kind color */
  --content-secondary: var(--colors-sf-grayscale-800-base); /* @kind color */
  --content-tertiary-2: var(--colors-sf-grayscale-600); /* @kind color */
  --content-tertiary-3: var(--colors-sf-grayscale-600); /* @kind color */
  --content-tertiary: var(--colors-sf-grayscale-600); /* @kind color */
  --feedback-rating-content: var(--colors-sf-yellow-500); /* @kind color */
  --feedback-rating: var(--colors-sf-yellow-500); /* @kind color */
  --font-family-body: "Open Sans";
  --font-family-display: "Oswald";
  --font-family-ff-body: "Open Sans";
  --font-family-ff-display: "Open Sans";
  --font-family-sf-body: "Open Sans";
  --font-family-sf-display: "Oswald";
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-medium-2: 500;
  --font-weight-medium: 500;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --neutral-colors-color-15: rgb(20,20,20); /* @kind color */
  --neutral-colors-color: rgb(251,251,251); /* @kind color */
  --radius-16: 16;
  --radius-24: 24;
  --radius-32: 32;
  --radius-full-2: var(--radius-full);
  --radius-full: 128;
  --radius-lg: var(--radius-24);
  --radius-none: 0;
  --radius-sm-2: var(--radius-16);
  --radius-sm: var(--radius-16);
  --radius-xl: var(--radius-32);
  --section-radius-desktop: var(--radius-xl);
  --section-radius-mobile: var(--radius-lg);
  --section-title-xs-fontfamily: var(--font-family-body);
  --section-title-xs-fontsize: 16;
  --section-title-xs-lineheight: 24;
  --sematic-token-content-primary-white: var(--colors-neatural-grayscale-50); /* @kind color */
  --sematic-token-content-primary: var(--colors-neatural-grayscale-900); /* @kind color */
  --sematic-token-surface-base-light: var(--colors-brand-rose-500-base); /* @kind color */
  --spacing-12: 12;
  --spacing-16: 16;
  --spacing-20: 20;
  --spacing-24: 24;
  --spacing-2: 2;
  --spacing-32: 32;
  --spacing-40: 40;
  --spacing-48: 48;
  --spacing-4: 4;
  --spacing-72: 72;
  --spacing-8: 8;
  --spacing-component-2xs: var(--spacing-2);
  --spacing-component-lg: var(--spacing-16);
  --spacing-component-md-2: var(--spacing-12);
  --spacing-component-md: var(--spacing-12);
  --spacing-component-sm: var(--spacing-8);
  --spacing-component-xl: var(--spacing-20);
  --spacing-component-xs: var(--spacing-4);
  --spacing-layout-sm: var(--spacing-72);
  --spacing-section-lg: var(--spacing-40);
  --spacing-section-md-2: var(--spacing-32);
  --spacing-section-md: var(--spacing-32);
  --spacing-section-xl: var(--spacing-48);
  --spacing-section-xs: var(--spacing-24);
  --surface-base-2: var(--colors-sf-grayscale-50); /* @kind color */
  --surface-base-dark: var(--colors-sf-grayscale-800-base); /* @kind color */
  --surface-base-extra-dark-2: var(--colors-sf-grayscale-900); /* @kind color */
  --surface-base-extra-dark: var(--colors-sf-grayscale-900); /* @kind color */
  --surface-base: var(--colors-sf-grayscale-50); /* @kind color */
  --surface-brand-extra-light-2: var(--colors-sf-rose-50); /* @kind color */
  --surface-brand-extra-light-3: var(--colors-sf-rose-50); /* @kind color */
  --surface-brand-extra-light-4: var(--colors-sf-rose-50); /* @kind color */
  --surface-brand-extra-light: var(--colors-sf-rose-50); /* @kind color */
  --surface-brand-inverse-pressed-2: var(--colors-sf-rose-200); /* @kind color */
  --surface-brand-inverse-pressed-3: var(--colors-sf-rose-200); /* @kind color */
  --surface-brand-inverse-pressed-4: var(--colors-sf-rose-200); /* @kind color */
  --surface-brand-inverse-pressed: var(--colors-sf-rose-200); /* @kind color */
  --surface-brand-light-2: var(--colors-sf-rose-500-base); /* @kind color */
  --surface-brand-light-3: var(--colors-sf-rose-500-base); /* @kind color */
  --surface-brand-light-4: var(--colors-sf-rose-500-base); /* @kind color */
  --surface-brand-light: var(--colors-sf-rose-500-base); /* @kind color */
  --surface-brand-primary-hover: var(--colors-sf-pink-700); /* @kind color */
  --surface-brand-primary-pressed: var(--colors-sf-pink-900); /* @kind color */
  --surface-brand-primary: var(--colors-sf-pink-500-base); /* @kind color */
  --surface-brand-tertiary: var(--colors-sf-grayscale-500); /* @kind color */
  --surface-disabled-2: var(--colors-sf-grayscale-200); /* @kind color */
  --surface-disabled: var(--colors-sf-grayscale-200); /* @kind color */
  --surface-neutral-hover: var(--colors-sf-grayscale-500); /* @kind color */
  --surface-primary-2: var(--colors-sf-pink-500-base); /* @kind color */
  --surface-primary-hover-2: var(--colors-sf-pink-700); /* @kind color */
  --surface-primary-hover: var(--colors-sf-pink-700); /* @kind color */
  --surface-primary-pressed-2: var(--colors-sf-pink-900); /* @kind color */
  --surface-primary-pressed: var(--colors-sf-pink-900); /* @kind color */
  --surface-primary: var(--colors-sf-pink-500-base); /* @kind color */
  --surface-tertiary-2: var(--colors-sf-grayscale-500); /* @kind color */
  --surface-tertiary: var(--colors-sf-grayscale-500); /* @kind color */
  --tag-bestseller: var(--colors-sf-grayscale-800-base); /* @kind color */
  --tag-favorite: var(--colors-sf-pink-350); /* @kind color */
  --tag-new: var(--colors-sf-pink-750); /* @kind color */
  --tag-sale: var(--colors-sf-pink-500-base); /* @kind color */
  --title-s-fontfamily: var(--font-family-display);
  --title-s-fontsize: 24;
  --title-s-fontweight: var(--font-weight-medium-2);
  --title-s-lineheight: 28;
  --typography-body-lg-bold-desktop-fontfamily: var(--font-family-sf-body);
  --typography-body-lg-bold-desktop-fontsize: 18;
  --typography-body-lg-bold-desktop-fontweight: var(--font-weight-bold);
  --typography-body-lg-bold-desktop-lineheight: 26;
  --typography-body-lg-bold-mobile-fontfamily-2: var(--font-family-sf-body);
  --typography-body-lg-bold-mobile-fontfamily: var(--font-family-sf-body);
  --typography-body-lg-bold-mobile-fontsize-2: 16;
  --typography-body-lg-bold-mobile-fontsize: 18;
  --typography-body-lg-bold-mobile-fontweight-2: var(--font-weight-bold);
  --typography-body-lg-bold-mobile-fontweight: var(--font-weight-bold);
  --typography-body-lg-bold-mobile-lineheight-2: 24;
  --typography-body-lg-bold-mobile-lineheight: 24;
  --typography-body-lg-regular-desktop-fontfamily: var(--font-family-sf-body);
  --typography-body-lg-regular-desktop-fontsize: 18;
  --typography-body-lg-regular-desktop-fontweight: var(--font-weight-regular);
  --typography-body-lg-regular-desktop-lineheight: 26;
  --typography-body-md-bold-desktop-fontfamily: var(--font-family-sf-body);
  --typography-body-md-bold-desktop-fontsize: 16;
  --typography-body-md-bold-desktop-fontweight: var(--font-weight-bold);
  --typography-body-md-bold-desktop-lineheight: 24;
  --typography-body-md-bold-mobile-fontfamily: var(--font-family-sf-body);
  --typography-body-md-bold-mobile-fontsize: 14;
  --typography-body-md-bold-mobile-fontweight: var(--font-weight-bold);
  --typography-body-md-bold-mobile-lineheight: 24;
  --typography-body-md-regular-desktop-fontfamily-2: var(--font-family-sf-body);
  --typography-body-md-regular-desktop-fontfamily: var(--font-family-sf-body);
  --typography-body-md-regular-desktop-fontsize-2: 18;
  --typography-body-md-regular-desktop-fontsize: 16;
  --typography-body-md-regular-desktop-fontweight: var(--font-weight-regular);
  --typography-body-md-regular-desktop-lineheight-2: 26;
  --typography-body-md-regular-desktop-lineheight: 24;
  --typography-body-md-regular-mobile-fontfamily-2: var(--font-family-sf-body);
  --typography-body-md-regular-mobile-fontfamily: var(--font-family-sf-body);
  --typography-body-md-regular-mobile-fontsize-2: 16;
  --typography-body-md-regular-mobile-fontsize: 14;
  --typography-body-md-regular-mobile-fontweight-2: var(--font-weight-regular);
  --typography-body-md-regular-mobile-fontweight: var(--font-weight-regular);
  --typography-body-md-regular-mobile-lineheight-2: 24;
  --typography-body-md-regular-mobile-lineheight: 24;
  --typography-body-md-semibold-desktop-fontfamily: var(--font-family-sf-body);
  --typography-body-md-semibold-desktop-fontsize: 16;
  --typography-body-md-semibold-desktop-fontweight: var(--font-weight-semibold);
  --typography-body-md-semibold-desktop-lineheight: 24;
  --typography-body-s-semibold-mobile-fontfamily: var(--font-family-sf-body);
  --typography-body-s-semibold-mobile-fontsize: 12;
  --typography-body-s-semibold-mobile-fontweight: var(--font-weight-semibold);
  --typography-body-s-semibold-mobile-lineheight: 20;
  --typography-body-sm-regular-desktop-fontfamily: var(--font-family-sf-body);
  --typography-body-sm-regular-desktop-fontsize: 14;
  --typography-body-sm-regular-desktop-fontweight: var(--font-weight-regular);
  --typography-body-sm-regular-desktop-lineheight: 22;
  --typography-body-sm-regular-mobile-fontfamily-2: var(--font-family-sf-body);
  --typography-body-sm-regular-mobile-fontfamily: var(--font-family-sf-body);
  --typography-body-sm-regular-mobile-fontsize-2: 12;
  --typography-body-sm-regular-mobile-fontsize: 14;
  --typography-body-sm-regular-mobile-fontweight-2: var(--font-weight-regular);
  --typography-body-sm-regular-mobile-fontweight: var(--font-weight-regular);
  --typography-body-sm-regular-mobile-lineheight-2: 20;
  --typography-body-sm-regular-mobile-lineheight: 24;
  --typography-body-sm-semibold-desktop-fontfamily: var(--font-family-sf-body);
  --typography-body-sm-semibold-desktop-fontsize: 14;
  --typography-body-sm-semibold-desktop-fontweight: var(--font-weight-semibold);
  --typography-body-sm-semibold-desktop-lineheight: 22;
  --typography-body-sm-semibold-mobile-fontfamily-2: var(--font-family-sf-body);
  --typography-body-sm-semibold-mobile-fontfamily: var(--font-family-sf-body);
  --typography-body-sm-semibold-mobile-fontsize-2: 12;
  --typography-body-sm-semibold-mobile-fontsize: 12;
  --typography-body-sm-semibold-mobile-fontweight-2: var(--font-weight-semibold);
  --typography-body-sm-semibold-mobile-fontweight: var(--font-weight-semibold);
  --typography-body-sm-semibold-mobile-lineheight-2: 20;
  --typography-body-sm-semibold-mobile-lineheight: 20;
  --typography-body-xl-regular-desktop-fontfamily: var(--font-family-sf-body);
  --typography-body-xl-regular-desktop-fontsize: 20;
  --typography-body-xl-regular-desktop-fontweight: var(--font-weight-regular);
  --typography-body-xl-regular-desktop-lineheight: 26;
  --typography-body-xs-regular-desktop-fontfamily: var(--font-family-sf-body);
  --typography-body-xs-regular-desktop-fontsize: 14;
  --typography-body-xs-regular-desktop-fontweight: var(--font-weight-regular);
  --typography-body-xs-regular-desktop-lineheight: 22;
  --typography-body-xxl-bold-desktop-fontfamily: var(--font-family-sf-body);
  --typography-body-xxl-bold-desktop-fontsize: 26;
  --typography-body-xxl-bold-desktop-fontweight: var(--font-weight-bold);
  --typography-body-xxl-bold-desktop-lineheight: 34;
  --typography-body-xxl-bold-mobile-fontfamily: var(--font-family-sf-body);
  --typography-body-xxl-bold-mobile-fontsize: 24;
  --typography-body-xxl-bold-mobile-fontweight: var(--font-weight-bold);
  --typography-body-xxl-bold-mobile-lineheight: 32;
  --typography-caption-regular-desktop-fontfamily: var(--font-family-sf-body);
  --typography-caption-regular-desktop-fontsize: 12;
  --typography-caption-regular-desktop-fontweight: var(--font-weight-regular);
  --typography-caption-regular-desktop-lineheight: 20;
  --typography-caption-regular-mobile-fontfamily: var(--font-family-sf-body);
  --typography-caption-regular-mobile-fontsize: 12;
  --typography-caption-regular-mobile-fontweight: var(--font-weight-regular);
  --typography-caption-regular-mobile-lineheight: 18;
  --typography-display-md-desktop-fontfamily: var(--font-family-sf-display);
  --typography-display-md-desktop-fontsize: 56;
  --typography-display-md-desktop-fontweight: var(--font-weight-medium);
  --typography-display-md-desktop-lineheight: 64;
  --typography-h1-desktop-fontfamily: var(--font-family-sf-display);
  --typography-h1-desktop-fontsize: 48;
  --typography-h1-desktop-fontweight: var(--font-weight-medium);
  --typography-h1-desktop-lineheight: 56;
  --typography-h1-mobile-fontfamily: var(--font-family-sf-display);
  --typography-h1-mobile-fontsize: 32;
  --typography-h1-mobile-fontweight: var(--font-weight-medium);
  --typography-h1-mobile-lineheight: 40;
  --typography-h3-desktop-fontfamily: var(--font-family-sf-display);
  --typography-h3-desktop-fontsize: 24;
  --typography-h3-desktop-fontweight: var(--font-weight-medium);
  --typography-h3-desktop-lineheight: 28;
  --typography-h3-mobile-fontfamily: var(--font-family-sf-display);
  --typography-h3-mobile-fontsize: 20;
  --typography-h3-mobile-fontweight: var(--font-weight-medium);
  --typography-h3-mobile-lineheight: 26;
  --typography-section-title-s-mobile-fontfamily: var(--font-family-sf-body);
  --typography-section-title-s-mobile-fontsize: 16;
  --typography-section-title-s-mobile-fontweight: var(--font-weight-semibold);
  --typography-section-title-s-mobile-lineheight: 24;
  --typography-section-title-xs-mobile-fontfamily: var(--font-family-sf-body);
  --typography-section-title-xs-mobile-fontsize: 14;
  --typography-section-title-xs-mobile-fontweight: var(--font-weight-semibold);
  --typography-section-title-xs-mobile-lineheight: 22;
  --typography-tag-mobile-fontfamily: var(--font-family-sf-body);
  --typography-tag-mobile-fontsize: 12;
  --typography-tag-mobile-fontweight: var(--font-weight-semibold);
  --typography-tag-mobile-lineheight: 18;
}

:root[data-mode="ff"] {
  --content-accent: var(--colors-ff-crimson-400); /* @kind color */
  --content-brand-inverse: var(--colors-ff-maroon-50); /* @kind color */
  --content-brand-light: var(--colors-ff-tan-100); /* @kind color */
  --content-inverse: var(--colors-ff-neutral-50); /* @kind color */
  --content-on-brand-disabled-2: var(--colors-ff-neutral-300); /* @kind color */
  --content-on-brand-disabled: var(--colors-ff-neutral-300); /* @kind color */
  --content-primary-2: var(--colors-ff-neutral-900); /* @kind color */
  --content-primary-3: var(--colors-ff-neutral-900); /* @kind color */
  --content-primary-white-2: var(--colors-ff-neutral-0); /* @kind color */
  --content-primary-white-3: var(--colors-ff-neutral-0); /* @kind color */
  --content-primary-white: var(--colors-ff-neutral-0); /* @kind color */
  --content-primary: var(--colors-ff-neutral-900); /* @kind color */
  --content-quaternary-2: var(--colors-ff-neutral-400); /* @kind color */
  --content-quaternary: var(--colors-ff-neutral-400); /* @kind color */
  --content-secondary: var(--colors-ff-neutral-800); /* @kind color */
  --content-tertiary-2: var(--colors-ff-neutral-600); /* @kind color */
  --content-tertiary-3: var(--colors-ff-neutral-600); /* @kind color */
  --content-tertiary: var(--colors-ff-neutral-600); /* @kind color */
  --feedback-rating-content: var(--colors-sf-yellow-500); /* @kind color */
  --feedback-rating: var(--colors-sf-yellow-500); /* @kind color */
  --radius-full-2: var(--radius-none);
  --radius-lg: var(--radius-none);
  --radius-sm-2: var(--radius-none);
  --radius-sm: var(--radius-none);
  --radius-xl: var(--radius-none);
  --spacing-component-2xs: var(--spacing-2);
  --spacing-component-lg: var(--spacing-16);
  --spacing-component-md-2: var(--spacing-12);
  --spacing-component-md: var(--spacing-12);
  --spacing-component-sm: var(--spacing-8);
  --spacing-component-xl: var(--spacing-20);
  --spacing-component-xs: var(--spacing-4);
  --spacing-layout-sm: var(--spacing-72);
  --spacing-section-lg: var(--spacing-40);
  --spacing-section-md-2: var(--spacing-32);
  --spacing-section-md: var(--spacing-32);
  --spacing-section-xl: var(--spacing-48);
  --spacing-section-xs: var(--spacing-24);
  --surface-base-2: var(--colors-ff-neutral-0); /* @kind color */
  --surface-base-dark: var(--colors-ff-neutral-800); /* @kind color */
  --surface-base-extra-dark-2: var(--colors-ff-neutral-900); /* @kind color */
  --surface-base-extra-dark: var(--colors-ff-neutral-900); /* @kind color */
  --surface-base: var(--colors-ff-neutral-0); /* @kind color */
  --surface-brand-extra-light-2: var(--colors-ff-neutral-50); /* @kind color */
  --surface-brand-extra-light-3: var(--colors-ff-neutral-50); /* @kind color */
  --surface-brand-extra-light-4: var(--colors-ff-neutral-50); /* @kind color */
  --surface-brand-extra-light: var(--colors-ff-neutral-50); /* @kind color */
  --surface-brand-inverse-pressed-2: var(--colors-ff-neutral-50); /* @kind color */
  --surface-brand-inverse-pressed-3: var(--colors-ff-neutral-50); /* @kind color */
  --surface-brand-inverse-pressed-4: var(--colors-ff-neutral-50); /* @kind color */
  --surface-brand-inverse-pressed: var(--colors-ff-neutral-50); /* @kind color */
  --surface-brand-light-2: var(--colors-ff-neutral-0); /* @kind color */
  --surface-brand-light-3: var(--colors-ff-neutral-0); /* @kind color */
  --surface-brand-light-4: var(--colors-ff-neutral-0); /* @kind color */
  --surface-brand-light: var(--colors-ff-neutral-0); /* @kind color */
  --surface-brand-primary-hover: var(--colors-ff-crimson-600); /* @kind color */
  --surface-brand-primary-pressed: var(--colors-ff-crimson-800); /* @kind color */
  --surface-brand-primary: var(--colors-ff-crimson-400); /* @kind color */
  --surface-brand-tertiary: var(--colors-ff-neutral-500); /* @kind color */
  --surface-disabled-2: var(--colors-ff-neutral-200); /* @kind color */
  --surface-disabled: var(--colors-ff-neutral-200); /* @kind color */
  --surface-neutral-hover: var(--colors-ff-neutral-500); /* @kind color */
  --surface-primary-2: var(--colors-ff-crimson-400); /* @kind color */
  --surface-primary-hover-2: var(--colors-ff-crimson-600); /* @kind color */
  --surface-primary-hover: var(--colors-ff-crimson-600); /* @kind color */
  --surface-primary-pressed-2: var(--colors-ff-crimson-800); /* @kind color */
  --surface-primary-pressed: var(--colors-ff-crimson-800); /* @kind color */
  --surface-primary: var(--colors-ff-crimson-400); /* @kind color */
  --surface-tertiary-2: var(--colors-ff-neutral-500); /* @kind color */
  --surface-tertiary: var(--colors-ff-neutral-500); /* @kind color */
  --tag-bestseller: var(--colors-ff-tan-900); /* @kind color */
  --tag-favorite: var(--colors-ff-crimson-400); /* @kind color */
  --tag-new: var(--colors-ff-maroon-600); /* @kind color */
  --tag-sale: var(--colors-ff-crimson-500); /* @kind color */
  --typography-body-lg-bold-desktop-fontfamily: var(--font-family-ff-body);
  --typography-body-lg-bold-desktop-fontsize: 18;
  --typography-body-lg-bold-desktop-fontweight: var(--font-weight-bold);
  --typography-body-lg-bold-desktop-lineheight: 26;
  --typography-body-lg-bold-mobile-fontfamily-2: var(--font-family-ff-body);
  --typography-body-lg-bold-mobile-fontfamily: var(--font-family-ff-body);
  --typography-body-lg-bold-mobile-fontsize-2: 16;
  --typography-body-lg-bold-mobile-fontsize: 18;
  --typography-body-lg-bold-mobile-fontweight-2: var(--font-weight-bold);
  --typography-body-lg-bold-mobile-fontweight: var(--font-weight-bold);
  --typography-body-lg-bold-mobile-lineheight-2: 24;
  --typography-body-lg-bold-mobile-lineheight: 24;
  --typography-body-lg-regular-desktop-fontfamily: var(--font-family-ff-body);
  --typography-body-lg-regular-desktop-fontsize: 18;
  --typography-body-lg-regular-desktop-fontweight: var(--font-weight-regular);
  --typography-body-lg-regular-desktop-lineheight: 26;
  --typography-body-md-bold-desktop-fontfamily: var(--font-family-ff-body);
  --typography-body-md-bold-desktop-fontsize: 16;
  --typography-body-md-bold-desktop-fontweight: var(--font-weight-bold);
  --typography-body-md-bold-desktop-lineheight: 24;
  --typography-body-md-bold-mobile-fontfamily: var(--font-family-ff-body);
  --typography-body-md-bold-mobile-fontsize: 14;
  --typography-body-md-bold-mobile-fontweight: var(--font-weight-bold);
  --typography-body-md-bold-mobile-lineheight: 24;
  --typography-body-md-regular-desktop-fontfamily-2: var(--font-family-ff-body);
  --typography-body-md-regular-desktop-fontfamily: var(--font-family-ff-body);
  --typography-body-md-regular-desktop-fontsize-2: 18;
  --typography-body-md-regular-desktop-fontsize: 16;
  --typography-body-md-regular-desktop-fontweight: var(--font-weight-regular);
  --typography-body-md-regular-desktop-lineheight-2: 26;
  --typography-body-md-regular-desktop-lineheight: 24;
  --typography-body-md-regular-mobile-fontfamily-2: var(--font-family-ff-body);
  --typography-body-md-regular-mobile-fontfamily: var(--font-family-ff-body);
  --typography-body-md-regular-mobile-fontsize-2: 16;
  --typography-body-md-regular-mobile-fontsize: 14;
  --typography-body-md-regular-mobile-fontweight-2: var(--font-weight-regular);
  --typography-body-md-regular-mobile-fontweight: var(--font-weight-regular);
  --typography-body-md-regular-mobile-lineheight-2: 24;
  --typography-body-md-regular-mobile-lineheight: 24;
  --typography-body-md-semibold-desktop-fontfamily: var(--font-family-ff-body);
  --typography-body-md-semibold-desktop-fontsize: 16;
  --typography-body-md-semibold-desktop-fontweight: var(--font-weight-semibold);
  --typography-body-md-semibold-desktop-lineheight: 24;
  --typography-body-s-semibold-mobile-fontfamily: var(--font-family-ff-body);
  --typography-body-s-semibold-mobile-fontsize: 12;
  --typography-body-s-semibold-mobile-fontweight: var(--font-weight-semibold);
  --typography-body-s-semibold-mobile-lineheight: 20;
  --typography-body-sm-regular-desktop-fontfamily: var(--font-family-ff-body);
  --typography-body-sm-regular-desktop-fontsize: 14;
  --typography-body-sm-regular-desktop-fontweight: var(--font-weight-regular);
  --typography-body-sm-regular-desktop-lineheight: 22;
  --typography-body-sm-regular-mobile-fontfamily-2: var(--font-family-ff-body);
  --typography-body-sm-regular-mobile-fontfamily: var(--font-family-ff-body);
  --typography-body-sm-regular-mobile-fontsize-2: 12;
  --typography-body-sm-regular-mobile-fontsize: 14;
  --typography-body-sm-regular-mobile-fontweight-2: var(--font-weight-regular);
  --typography-body-sm-regular-mobile-fontweight: var(--font-weight-regular);
  --typography-body-sm-regular-mobile-lineheight-2: 20;
  --typography-body-sm-regular-mobile-lineheight: 24;
  --typography-body-sm-semibold-desktop-fontfamily: var(--font-family-ff-body);
  --typography-body-sm-semibold-desktop-fontsize: 14;
  --typography-body-sm-semibold-desktop-fontweight: var(--font-weight-semibold);
  --typography-body-sm-semibold-desktop-lineheight: 22;
  --typography-body-sm-semibold-mobile-fontfamily-2: var(--font-family-ff-body);
  --typography-body-sm-semibold-mobile-fontfamily: var(--font-family-ff-body);
  --typography-body-sm-semibold-mobile-fontsize-2: 12;
  --typography-body-sm-semibold-mobile-fontsize: 12;
  --typography-body-sm-semibold-mobile-fontweight-2: var(--font-weight-semibold);
  --typography-body-sm-semibold-mobile-fontweight: var(--font-weight-semibold);
  --typography-body-sm-semibold-mobile-lineheight-2: 20;
  --typography-body-sm-semibold-mobile-lineheight: 20;
  --typography-body-xl-regular-desktop-fontfamily: var(--font-family-ff-body);
  --typography-body-xl-regular-desktop-fontsize: 20;
  --typography-body-xl-regular-desktop-fontweight: var(--font-weight-regular);
  --typography-body-xl-regular-desktop-lineheight: 26;
  --typography-body-xs-regular-desktop-fontfamily: var(--font-family-ff-body);
  --typography-body-xs-regular-desktop-fontsize: 14;
  --typography-body-xs-regular-desktop-fontweight: var(--font-weight-regular);
  --typography-body-xs-regular-desktop-lineheight: 22;
  --typography-body-xxl-bold-desktop-fontfamily: var(--font-family-ff-body);
  --typography-body-xxl-bold-desktop-fontsize: 26;
  --typography-body-xxl-bold-desktop-fontweight: var(--font-weight-bold);
  --typography-body-xxl-bold-desktop-lineheight: 34;
  --typography-body-xxl-bold-mobile-fontfamily: var(--font-family-ff-body);
  --typography-body-xxl-bold-mobile-fontsize: 24;
  --typography-body-xxl-bold-mobile-fontweight: var(--font-weight-bold);
  --typography-body-xxl-bold-mobile-lineheight: 32;
  --typography-caption-regular-desktop-fontfamily: var(--font-family-ff-body);
  --typography-caption-regular-desktop-fontsize: 12;
  --typography-caption-regular-desktop-fontweight: var(--font-weight-regular);
  --typography-caption-regular-desktop-lineheight: 20;
  --typography-caption-regular-mobile-fontfamily: var(--font-family-ff-body);
  --typography-caption-regular-mobile-fontsize: 12;
  --typography-caption-regular-mobile-fontweight: var(--font-weight-regular);
  --typography-caption-regular-mobile-lineheight: 18;
  --typography-display-md-desktop-fontfamily: var(--font-family-ff-display);
  --typography-display-md-desktop-fontsize: 56;
  --typography-display-md-desktop-fontweight: var(--font-weight-extrabold);
  --typography-display-md-desktop-lineheight: 64;
  --typography-h1-desktop-fontfamily: var(--font-family-ff-display);
  --typography-h1-desktop-fontsize: 48;
  --typography-h1-desktop-fontweight: var(--font-weight-extrabold);
  --typography-h1-desktop-lineheight: 56;
  --typography-h1-mobile-fontfamily: var(--font-family-ff-display);
  --typography-h1-mobile-fontsize: 32;
  --typography-h1-mobile-fontweight: var(--font-weight-extrabold);
  --typography-h1-mobile-lineheight: 40;
  --typography-h3-desktop-fontfamily: var(--font-family-ff-display);
  --typography-h3-desktop-fontsize: 24;
  --typography-h3-desktop-fontweight: var(--font-weight-extrabold);
  --typography-h3-desktop-lineheight: 28;
  --typography-h3-mobile-fontfamily: var(--font-family-ff-display);
  --typography-h3-mobile-fontsize: 20;
  --typography-h3-mobile-fontweight: var(--font-weight-extrabold);
  --typography-h3-mobile-lineheight: 26;
  --typography-section-title-s-mobile-fontfamily: var(--font-family-ff-body);
  --typography-section-title-s-mobile-fontsize: 16;
  --typography-section-title-s-mobile-fontweight: var(--font-weight-bold);
  --typography-section-title-s-mobile-lineheight: 24;
  --typography-section-title-xs-mobile-fontfamily: var(--font-family-ff-body);
  --typography-section-title-xs-mobile-fontsize: 14;
  --typography-section-title-xs-mobile-fontweight: var(--font-weight-semibold);
  --typography-section-title-xs-mobile-lineheight: 22;
  --typography-tag-mobile-fontfamily: var(--font-family-ff-body);
  --typography-tag-mobile-fontsize: 12;
  --typography-tag-mobile-fontweight: var(--font-weight-semibold);
  --typography-tag-mobile-lineheight: 18;
}

:root[data-mode="mobile"] {
  --section-title-xs-fontfamily: var(--font-family-body);
  --section-title-xs-fontsize: 14;
  --section-title-xs-lineheight: 22;
  --title-s-fontfamily: var(--font-family-display);
  --title-s-fontsize: 20;
  --title-s-fontweight: var(--font-weight-medium-2);
  --title-s-lineheight: 26;
}

:root[data-theme="dark"], .dark {
  --neutral-colors-color-15: rgb(251,251,251); /* @kind color */
  --neutral-colors-color: rgb(20,20,20); /* @kind color */
}