:root {
  --baseWhite: #ffffff;
  /* COLORS OLD */
  --brandAtom900: var(--icon-brand);
  --brandAtom700: #aa263e;
  --headerBackground: #ffffff;
  --brandAtom100: var(--layer-floor-0-brand-subtle);
  --brandAtom50: #fdf4f3;
  --navBarIconFill: #d4f3df;
  --headerApp: #d4f3df;
  --brandTwo700: rgba(255, 255, 255, 0);
  --seed900: #1b1a1a;
  --seed800: #393636;
  --seed500: #696364;
  --seed400: #837e7f;
  --seed300: #a6a2a3;
  --seed200: #c9c6c7;
  --seed100: #e4e3e3;
  --seed50: #f7f6f6;
  --seed00: #ffffff;
  --system500Suc: #5ab478;
  --system50Suc: #eff8f2;
  --system500War: #ff9a51;
  --system50War: #fff5ee;
  --system500Err: #ea2b2b;
  --system50Err: #fdf4f3;
  --system050OverlayMode: rgba(0, 0, 0, 0.5);
  --system070DisabledMode: rgba(255, 255, 255, 0.7);
  --system020HoverMode: #cccccc33;
  --checkbox: #7f2239;
  --star: #1b1a1a;
  --like: var(--icon-error);
  --footer: #000000;
  --buttonPrimary: var(--layer-floor-1-action-brand);
  --buttonPrimaryHover: var(--layer-floor-1-action-brand-hover);
  --buttonSecondary: var(--layer-floor-1-action-secondary);
  --buttonSecondaryHover: var(--layer-floor-1-action-secondary-hover);
  --buttonCircle: var(--layer-floor-0-base);
  --buttonCircleIcon: var(--icon-primary);
  --badgeExpress: #aa263e;
  --badgeDiscount: #7f2239;
  --badgeMulti: #fce7e8;
  --badgeBundle: #aa263e;
  --badgeCounter: #aa263e;
  --input200InputHov: var(--layer-surface-transparent-2);
  --input50InputDefault: var(--layer-surface-transparent-1);
  --text00Inv: var(--text-white);
  --text900Prim: var(--text-black);
  --text400Sec: var(--text-tertiary);
  --text300Tre: var(--text-placeholder);
  --text700Acc: var(--text-secondary);
  --textHeader: #1b1a1a;
  --textTitle: var(--text-primary);
  --textButtonPrim: #ffffff;
  --textCategory: #ffffff;
  --textProductCard: #1b1a1a;
  /* FONTS OLD */
  --fontFamily1: 'Inter', sans-serif;
  --fontFamily2: 'Inter', sans-serif;
  --headingH1: 400 32px / 40px 'Inter', sans-serif;
  --headingH2: 400 24px / 24px 'Inter', sans-serif;
  --headingH3: 400 18px / 24px 'Inter', sans-serif;
  --headingH4: 400 15px / 24px 'Inter', sans-serif;
  --subtitle1: 700 24px / 24px 'Inter', sans-serif;
  --subtitle2: 700 18px / 24px 'Inter', sans-serif;
  --subtitle3: 500 18px / 24px 'Inter', sans-serif;
  --body1: 700 15px / 24px 'Inter', sans-serif;
  --body2: 500 15px / 24px 'Inter', sans-serif;
  --body3: 700 14px / 16px 'Inter', sans-serif;
  --body4: 500 14px / 16px 'Inter', sans-serif;
  --caption1: 700 12px / 16px 'Inter', sans-serif;
  --caption2: 500 12px / 16px 'Inter', sans-serif;
  --caption3: 700 8px / 12px 'Inter', sans-serif;
  --button1: 500 14px / 16px 'Inter', sans-serif;
  --price1: 700 16px / 18px 'Inter', sans-serif;
  --price2: 500 12px / 14px 'Inter', sans-serif;
  --price3: 700 24px / 24px 'Inter', sans-serif;
  --price4: 500 12px / 16px 'Inter', sans-serif;
  --price5: 700 24px / 24px 'Inter', sans-serif;
  --price6: 500 14px / 16px 'Inter', sans-serif;
  /* FONTS NEW */
  --fontFamily3: 'Inter';
  --header-500-regular: 400 48px / 48px 'Inter', sans-serif;
  --header-400-semibold: 600 36px / 36px 'Inter', sans-serif;
  --header-400-medium: 500 36px / 36px 'Inter', sans-serif;
  --header-400-light: 300 36px / 36px 'Inter', sans-serif;
  --header-300-medium: 500 32px / 36px 'Inter', sans-serif;
  --header-300-regular: 400 32px / 36px 'Inter', sans-serif;
  --header-300-light: 300 32px / 36px 'Inter', sans-serif;
  --header-200-semibold: 600 28px / 32px 'Inter', sans-serif;
  --header-200-light: 300 28px / 32px 'Inter', sans-serif;
  --header-150-medium: 500 24px / 28px 'Inter', sans-serif;
  --header-150-light: 300 24px / 28px 'Inter', sans-serif;
  --header-100-semibold: 600 20px / 24px 'Inter', sans-serif;
  --header-100-medium: 500 20px / 24px 'Inter', sans-serif;
  --header-50-semibold: 600 16px / 18px 'Inter', sans-serif;
  --header-50-medium: 400 16px / 18px 'Inter', sans-serif;
  --alt-header-100-semibold: 600 24px / 28px 'Inter', sans-serif;
  --text-600-regular: 400 20px / 36px 'Inter', sans-serif;
  --text-600-semibold: 700 24px / 36px 'Inter', sans-serif;
  --text-600-semibold-hight: 700 20px / 36px 'Inter', sans-serif;
  --text-500-regular: 400 20px / 21px 'Inter', sans-serif;
  --text-500-semibold: 700 20px / 21px 'Inter', sans-serif;
  --text-400-regular: 400 18px / 20px 'Inter', sans-serif;
  --text-400-medium: 500 18px / 20px 'Inter', sans-serif;
  --text-400-semibold: 600 18px / 20px 'Inter', sans-serif;
  --text-400-semibold-high: 700 18px / 28px 'Inter', sans-serif;
  --text-300-medium: 400 16px / 20px 'Inter', sans-serif;
  --text-300-medium-high: 400 16px / 28px 'Inter', sans-serif;
  --text-300-regular: 400 16px / 18px 'Inter', sans-serif;
  --text-300-regular-high: 400 16px / 28px 'Inter', 'dirham-font', sans-serif;
  --text-300-semibold: 600 16px / 18px 'Inter', sans-serif;
  --text-200-regular: 400 14px / 16px 'Inter', sans-serif;
  --text-200-regular-high: 400 14px / 24px 'Inter', sans-serif;
  --text-200-semibold-high: 700 14px / 24px 'Inter', sans-serif;
  --text-200-semibold: 600 14px / 16px 'Inter', sans-serif;
  --text-200-medium-high: 500 14px / 24px 'Inter', sans-serif;
  --text-200-medium: 500 14px / 16px 'Inter', sans-serif;
  --text-100-regular: 400 12px / 14px 'Inter', sans-serif;
  --text-100-regular-high: 400 12px / 18px 'Inter', sans-serif;
  --text-100-medium: 500 12px / 14px 'Inter', sans-serif;
  --text-100-medium-high: 500 12px / 18px 'Inter', sans-serif;
  --text-100-semibold: 600 12px / 14px 'Inter', sans-serif;
  --text-50-regular: 400 10px / 12px 'Inter', sans-serif;
  --text-50-medium: 500 10px / 12px 'Inter', sans-serif;
  --text-50-semibold: 700 10px / 12px 'Inter', sans-serif;
  --text-body-15m: 500 16px / 20px 'Inter', sans-serif;
  /* BORDER RADIUS NEW */
  --border-radius--0: 0px;
  --border-radius--100: 2px;
  --border-radius--200: 3px;
  --border-radius--300: 4px;
  --border-radius--400: 6px;
  --border-radius--500: 8px;
  --border-radius--550: 10px;
  --border-radius--600: 12px;
  --border-radius--650: 16px;
  --border-radius--700: 24px;
  --border-radius--800: 36px;
  --border-radius--1000: 9999px;
  --transition-speed: 0.3s;
  --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
  --dropdown-opacity-transition: opacity 0.256s cubic-bezier(0.4, 0, 0.2, 1);
  --dropdown-transform-transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  /* NUTRITION OLD */
  --nutritionLow: #0eb44d;
  --nutritionLowBg: #e7f7ed;
  --nutritionMedium: #f97313;
  --nutritionMediumBg: #fef1e7;
  --nutritionHigh: #e5243f;
  --nutritionHighBg: #fce9ec;
  --tileMask: linear-gradient(
          180deg,
          rgba(27, 26, 26, 0) 30%,
          rgba(27, 26, 26, 1) 100%
  );
  --tileMaskHalf: linear-gradient(
          180deg,
          rgba(27, 26, 26, 0) 50%,
          rgba(27, 26, 26, 1) 100%
  );
  /* COLORS NEW */
  --action-primary: #141415;
  --text-primary: #131316;
  --text-primary-inverse: #f4f4f5;
  --text-secondary: #000000a3;
  --text-tertiary: #2d2f3380;
  --text-placeholder: #2d2f3359;
  --text-disabled: #2d2f3340;
  --text-white: #ffffff;
  --text-black: #111417;
  --text-brand: #e86430;
  --text-link: #e94e1a;
  --text-link-hover: #9d3410;
  --text-error: #f63d68;
  --text-error-subtle: #ff6384;
  --text-warning: #c9a446;
  --text-warning-bright: #a47132;
  --text-success: #388b66;
  --text-inverse-primary: #141415;
  --text-inverse-secondary: #D7D9DBA3;
  --text-inverse-tertiary: #D7D9DB80;
  --text-inverse-disabled: #2d2f3340;
  --text-inverse-error: #f63d68;
  --text-inverse-error-subtle: #ff6384;
  --text-inverse-warning: #c9a446;
  --text-inverse-warning-bright: #a47132;
  --text-inverse-success: #388b66;
  --icon-primary: #141415;
  --icon-primary-inverse: #141415;
  --icon-secondary: #2d2f33b8;
  --icon-tertiary: #2d2f3380;
  --icon-disabled: #2d2f332b;
  --icon-white: #ffffff;
  --icon-black: #111417;
  --icon-brand: #e86430;
  --icon-link: #e94e1a;
  --icon-link-hover: #9d3410;
  --icon-error: #f63d68;
  --icon-error-subtle: #ff6384;
  --icon-warning: #c9a446;
  --icon-warning-bright: #a47132;
  --icon-success: #388b66;
  --icon-inverse-primary: #141415;
  --icon-inverse-secondary: #2d2f33b8;
  --icon-inverse-tertiary: #2d2f3380;
  --icon-inverse-disabled: #2d2f332b;
  --icon-inverse-error: #f63d68;
  --icon-inverse-error-subtle: #ff6384;
  --icon-inverse-warning: #c9a446;
  --icon-inverse-warning-bright: #a47132;
  --icon-inverse-success: #388b66;
  --stroke-primary: #2d2f332b;
  --stroke-secondary: #2d2f3324;
  --stroke-tertiary: #2d2f331a;
  --stroke-quaternary: #2d2f330f;
  --stroke-strong: transparent;
  --stroke-brand: #e86430;
  --stroke-brand-subtle: #ff6384;
  --stroke-link: #e94e1a;
  --stroke-success: #388b66;
  --stroke-warning: #c9a446;
  --stroke-error: #f63d68;
  --stroke-error-subtle: #ff6384;
  --stroke-inverse-primary: #2d2f332b;
  --stroke-inverse-secondary: #2d2f3324;
  --stroke-inverse-tertiary: #D7D9DB24;
  --stroke-inverse-quaternary: #2d2f330f;
  --stroke-inverse-error: #f63d68;
  --stroke-inverse-error-subtle: #ff6384;
  --stroke-inverse-warning: #c9a446;
  --stroke-inverse-warning-bright: #bf9039;
  --stroke-inverse-success: #388b66;
  --layer-surface-transparent-1: #2d2f330a;
  --layer-surface-transparent-2: #2d2f330f;
  --layer-surface-transparent-3: #2d2f331a;
  --layer-surface-transparent-4: #2d2f3340;
  --layer-surface-transparent-5: #2d2f3359;
  --layer-surface-transparent-6: #2d2f3380;
  --layer-surface-transparent-7: #000000a3;
  --layer-surface-transparent-8: #FFFFFFB8;
  --layer-floor-0-base: #ffffff;
  --layer-floor-0-base-alt: #e5e7eb;
  --layer-floor-0-brand: #e86430;
  --layer-floor-0-brand-secondary: #e94e1a;
  --layer-floor-0-brand-subtle: #e864300f;
  --layer-floor-0-inverse: #ffffff;
  --layer-floor-1-base: #2d2f330a;
  --layer-floor-1-action-brand: #e86430;
  --layer-floor-1-action-brand-hover: #d15420;
  --layer-floor-1-action-primary: #131316;
  --layer-floor-1-action-primary-hover: #26272b;
  --layer-floor-1-action-secondary: #2d2f332b;
  --layer-floor-1-action-secondary-hover: #2d2f3340;
  --layer-floor-1-action-neutral: #ffffff;
  --layer-floor-1-action-neutral-hover: #f3f4f6;
  --layer-floor-1-error: #e31b54;
  --layer-floor-1-error-subtle: #e31b541a;
  --layer-floor-1-error-medium: #e31b541f;
  --layer-floor-1-warning-subtle: #fa86551f;
  --layer-floor-1-warning-medium: #fa86552b;
  --layer-floor-1-success-subtle: #0676471a;
  --layer-floor-1-success-medium: #0676472b;
  --layer-floor-1-neutral-blue-subtle: #4d5bb41a;
  --layer-floor-1-neutral-blue-medium: #4d5bb43d;
  --layer-floor-1-neutral-gray-subtle: #d7d9db52;
  --layer-floor-1-neutral-gray-medium: #d7d9db80;
  --layer-floor-1-white: #ffffff;
  --layer-floor-2-base: #2d2f330a;
  --layer-floor-2-action-brand: #e86430;
  --layer-floor-2-action-brand-hover-2: #d15420;
  --layer-floor-2-action-brand-hover: #e86430;
  --layer-floor-2-action-primary: #131316;
  --layer-floor-2-action-primary-hover: #26272b;
  --layer-floor-2-action-secondary: #2d2f330a;
  --layer-floor-2-action-secondary-hover: #2d2f330f;
  --layer-floor-2-action-neutral: #d7d9db40;
  --layer-floor-2-action-neutral-hover: #d7d9db52;
  --layer-floor-2-error: #e31b54;
  --layer-floor-2-error-subtle: #e31b541a;
  --layer-floor-2-error-medium: #e31b541f;
  --layer-inverse-floor-0-base: #ffffff;
  --layer-inverse-floor-0-base-alt: #e5e7eb;
  --layer-inverse-surface-transparent-1: #2d2f330a;
  --layer-inverse-surface-transparent-2: #2d2f330f;
  --layer-inverse-surface-transparent-3: #2d2f331a;
  --layer-inverse-surface-transparent-4: #2d2f3340;
  --layer-inverse-surface-transparent-5: #2d2f3359;
  --layer-inverse-surface-transparent-6: #2d2f3380;
  --layer-inverse-surface-transparent-7: #000000a3;
  --layer-inverse-surface-transparent-8: #000000b8;
  --layer-inverse-error: #ff6384;
  --layer-inverse-error-subtle: #e31b5440;
  --layer-inverse-error-medium: #e31b5459;
  --layer-inverse-warning-subtle: #fa86552b;
  --layer-inverse-warning-medium: #fa865540;
  --layer-inverse-success-subtle: #06764740;
  --layer-inverse-success-medium: #06764759;
  --layer-inverse-neutral-blue-subtle: #4d5bb43d;
  --layer-inverse-neutral-blue-medium: #4d5bb459;
  --overlay-overlay-transparent-1: #ffffff1a;
  --overlay-overlay-transparent-2: #ffffff24;
  --overlay-overlay-transparent-3: #ffffff52;
  --overlay-overlay-transparent-4: #ffffff80;
  --overlay-overlay-transparent-5: #ffffffb8;
  --overlay-inverse-overlay-transparent-5: #ffffffb8;
  --effects-focusrings-focus-ring: #9e77ed;
  --effects-shadows-shadow-xs: #1018280d;
  --effects-shadows-shadow-sm_01: #1018281a;
  --effects-shadows-shadow-sm_02: #1018280f;
  --effects-shadows-shadow-sm-soft: #1018280f;
  --effects-shadows-shadow-md_01: #1018281a;
  --effects-shadows-shadow-md-soft: #1018280f;
  --effects-shadows-shadow-lg_01: #10182814;
  --effects-shadows-shadow-lg-soft: #10182808;
  --effects-shadows-shadow-xl_01: #10182814;
  --effects-shadows-shadow-xl-soft: #10182808;
  --effects-shadows-shadow-2xl: #1018282e;
  --effects-shadows-shadow-3xl: #10182824;
  --effects-shadows-shadow-skeumorphic-inner: #1018280d;
  --effects-shadows-shadow-skeumorphic-inner-border: #1018282e;
  --graphic-regular-white: #ffffff;
  --graphic-regular-black: #000000ff;
  --graphic-regular-red: #c6463d;
  --graphic-regular-red-pink: #f95792;
  --graphic-regular-orange-dark: #d78460;
  --graphic-regular-orange: #f79575;
  --graphic-regular-yellow: #fccb6d;
  --graphic-regular-green: #69e5b3;
  --graphic-regular-green-medium: #48b381;
  --graphic-regular-green-dark: #3a9e75;
  --graphic-regular-cyan: #69d0e4;
  --graphic-regular-blue-light: #7baff3;
  --graphic-regular-blue: #5584c3;
  --graphic-regular-blue-dark: #3e4784;
  --graphic-regular-violet: #7a85ed;
  --graphic-regular-pink: #d398ef;
  --graphic-regular-rose: #eb7dba;
  --graphic-regular-gray-neutral: #a9a9cb;
  --graphic-regular-gray-warm: #8e9aa5;
  --graphic-regular-gray-light: #e6e7e8;
  --graphic-regular-gray-dark: #30353c;
  --graphic-muted-red: #e69b95;
  --graphic-muted-red-pink: #d99fab;
  --graphic-muted-orange-dark: #cba99a;
  --graphic-muted-orange: #ebd2b5;
  --graphic-muted-yellow: #efdbb3;
  --graphic-muted-green: #a6dec7;
  --graphic-muted-cyan: #bcdfe6;
  --graphic-muted-blue-light: #bbcee8;
  --graphic-muted-blue: #96b1d4;
  --graphic-muted-blue-dark: #545b89;
  --graphic-muted-violet: #c8c0dd;
  --graphic-muted-pink: #e3c6e3;
  --graphic-muted-rose: #eab4d2;
  --graphic-muted-gray-neutral: #bebed1;
  --graphic-muted-gray-warm: #aea9a6;
  --graphic-transparent-white-10: #ffffff1a;
  --graphic-transparent-white-40: #ffffff66;
  --graphic-transparent-white-55: #FFFFFF8C;
  --graphic-transparent-white-70: #ffffffb3;
  --graphic-transparent-gray-40: #20293966;
  --graphic-transparent-brand-10: #E94E1A1A;
  --graphic-transparent-brand-15: #E94E1A26;
  --graphic-transparent-blue-25: #5d68a640;
  --graphic-transparent-red-25: #e31b5433;
  --graphic-transparent-yellow-25: #f7900940;
  --graphic-transparent-green-25: #388b6640;
  --graphic-transparent-green-40: #92d5ba66;
  --graphic-transparent-cyan: #69e3fa66;
  --graphic-transparent-violet: #a5b4e680;
  --graphic-transparent-pink: #d6c6ee66;
  --graphic-transparent-gray-neutral: #a9a9cb4d;
  --graphic-transparent-gray-warm: #8e9aa533;
  --background-bg-primary: #ffffff;

  :dark {
    --text-primary: #f4f4f5;
    --text-secondary: #ffffffa3;
    --text-tertiary: #d7d9db80;
    --text-placeholder: #d7d9db52;
    --text-disabled: #d7d9db40;
    --text-white: #f3f4f6;
    --text-black: #000000ff;
    --text-brand: #e86430;
    --text-link: #e94e1a;
    --text-link-hover: #e86430;
    --text-error: #ff6384;
    --text-error-subtle: #f63d68;
    --text-warning: #c9a446;
    --text-warning-bright: #bf9039;
    --text-success: #48b381;
    --text-inverse-primary: #111417;
    --text-inverse-secondary: #000000a3;
    --text-inverse-tertiary: #d7d9db80;
    --text-inverse-disabled: #00000066;
    --text-inverse-error: #f63d68;
    --text-inverse-error-subtle: #ff6384;
    --text-inverse-warning: #c9a446;
    --text-inverse-warning-bright: #a47132;
    --text-inverse-success: #388b66;
    --icon-primary: #f4f4f5;
    --icon-secondary: #d7d9dbb8;
    --icon-tertiary: #d7d9db80;
    --icon-disabled: #d7d9db2e;
    --icon-white: #f3f4f6;
    --icon-black: #000000ff;
    --icon-brand: #e86430;
    --icon-link: #e94e1a;
    --icon-link-hover: #e86430;
    --icon-error: #ff6384;
    --icon-error-subtle: #ff6384;
    --icon-warning: #c9a446;
    --icon-warning-bright: #bf9039;
    --icon-success: #48b381;
    --icon-inverse-primary: #111417;
    --icon-inverse-secondary: #000000a3;
    --icon-inverse-tertiary: #00000080;
    --icon-inverse-disabled: #00000066;
    --icon-inverse-error: #f63d68;
    --icon-inverse-error-subtle: #ff6384;
    --icon-inverse-warning: #c9a446;
    --icon-inverse-warning-bright: #a47132;
    --icon-inverse-success: #388b66;
    --stroke-primary: #d7d9db52;
    --stroke-secondary: #d7d9db2e;
    --stroke-tertiary: #d7d9db24;
    --stroke-quaternary: #d7d9db1a;
    --stroke-strong: transparent;
    --stroke-brand: #e86430;
    --stroke-brand-subtle: #fea3b4;
    --stroke-link: #e94e1a;
    --stroke-success: #68b88f;
    --stroke-warning: #c9a446;
    --stroke-error: #f63d68;
    --stroke-error-subtle: #c01048;
    --stroke-inverse-primary: #2d2f332b;
    --stroke-inverse-secondary: #2d2f3324;
    --stroke-inverse-tertiary: #2d2f331a;
    --stroke-inverse-quaternary: #2d2f330f;
    --stroke-inverse-error: #f63d68;
    --stroke-inverse-error-subtle: #ff6384;
    --stroke-inverse-warning: #c9a446;
    --stroke-inverse-warning-bright: #a47132;
    --stroke-inverse-success: #388b66;
    --layer-surface-transparent-1: #d7d9db0d;
    --layer-surface-transparent-2: #d7d9db12;
    --layer-surface-transparent-3: #d7d9db1a;
    --layer-surface-transparent-4: #d7d9db24;
    --layer-surface-transparent-5: #d7d9db2e;
    --layer-surface-transparent-6: #d7d9db2e;
    --layer-surface-transparent-7: #ffffffa3;
    --layer-surface-transparent-8: #ffffffb8;
    --layer-floor-0-base: #000000ff;
    --layer-floor-0-base-alt: #1d2024;
    --layer-floor-0-brand: #e86430;
    --layer-floor-0-brand-secondary: #e94e1a;
    --layer-floor-0-brand-subtle: #e8643040;
    --layer-floor-0-inverse: #ffffff;
    --layer-floor-1-base: #c0cad31a;
    --layer-floor-1-action-brand: #e86430;
    --layer-floor-1-action-brand-hover: #d15420;
    --layer-floor-1-action-primary: #131316;
    --layer-floor-1-action-primary-hover: #3f3f46;
    --layer-floor-1-action-secondary: #d7d9db2e;
    --layer-floor-1-action-secondary-hover: #d7d9db40;
    --layer-floor-1-action-neutral: #d7d9db1a;
    --layer-floor-1-action-neutral-hover: #d7d9db24;
    --layer-floor-1-error: #f63d68;
    --layer-floor-1-error-subtle: #e31b5440;
    --layer-floor-1-error-medium: #e31b5459;
    --layer-floor-1-warning-subtle: #fa86552b;
    --layer-floor-1-warning-medium: #fa865540;
    --layer-floor-1-success-subtle: #06764740;
    --layer-floor-1-success-medium: #06764759;
    --layer-floor-1-neutral-blue-subtle: #4d5bb43d;
    --layer-floor-1-neutral-blue-medium: #4d5bb459;
    --layer-floor-1-neutral-gray-subtle: #d7d9db1a;
    --layer-floor-1-neutral-gray-medium: #d7d9db2e;
    --layer-floor-1-white: #000000ff;
    --layer-floor-2-base: #c0cad31a;
    --layer-floor-2-action-brand: #e86430;
    --layer-floor-2-action-brand-hover-2: #d15420;
    --layer-floor-2-action-brand-hover: #e86430;
    --layer-floor-2-action-primary: #131316;
    --layer-floor-2-action-primary-hover: #26272b;
    --layer-floor-2-action-secondary: #d7d9db40;
    --layer-floor-2-action-secondary-hover: #d7d9db52;
    --layer-floor-2-action-neutral: #d7d9db1a;
    --layer-floor-2-action-neutral-hover: #d7d9db24;
    --layer-floor-2-error: #ff6384;
    --layer-floor-2-error-subtle: #e31b5440;
    --layer-floor-2-error-medium: #e31b5459;
    --layer-inverse-floor-0-base: #ffffff;
    --layer-inverse-floor-0-base-alt: #30353c;
    --layer-inverse-surface-transparent-1: #2d2f330a;
    --layer-inverse-surface-transparent-2: #2d2f330f;
    --layer-inverse-surface-transparent-3: #2d2f331a;
    --layer-inverse-surface-transparent-4: #2d2f3340;
    --layer-inverse-surface-transparent-5: #2d2f3359;
    --layer-inverse-surface-transparent-6: #2d2f3380;
    --layer-inverse-surface-transparent-7: #2d2f33a3;
    --layer-inverse-surface-transparent-8: #2d2f33b8;
    --layer-inverse-error: #e31b54;
    --layer-inverse-error-subtle: #e31b541a;
    --layer-inverse-error-medium: #e31b542b;
    --layer-inverse-warning-subtle: #fa86551a;
    --layer-inverse-warning-medium: #fa86552b;
    --layer-inverse-success-subtle: #0676471a;
    --layer-inverse-success-medium: #0676472b;
    --layer-inverse-neutral-blue-subtle: #4d5bb41a;
    --layer-inverse-neutral-blue-medium: #4d5bb43d;
    --overlay-overlay-transparent-1: #00000012;
    --overlay-overlay-transparent-2: #00000024;
    --overlay-overlay-transparent-3: #00000040;
    --overlay-overlay-transparent-4: #00000080;
    --overlay-overlay-transparent-5: #000000b8;
    --overlay-inverse-overlay-transparent-5: #000000b8;
    --effects-shadows-shadow-xs: #ffffff00;
    --effects-shadows-shadow-sm_01: #ffffff00;
    --effects-shadows-shadow-sm-soft: #ffffff00;
    --effects-shadows-shadow-md_01: #ffffff00;
    --effects-shadows-shadow-md-soft: #ffffff00;
    --effects-shadows-shadow-lg_01: #ffffff00;
    --effects-shadows-shadow-lg-soft: #ffffff00;
    --effects-shadows-shadow-xl_01: #ffffff00;
    --effects-shadows-shadow-xl-soft: #ffffff00;
    --effects-shadows-shadow-2xl: #ffffff00;
    --effects-shadows-shadow-3xl: #ffffff00;
    --effects-shadows-shadow-skeumorphic-inner: #0c111d0d;
    --effects-shadows-shadow-skeumorphic-inner-border: #0c111d2e;
    --graphic-regular-white: #ffffff;
    --graphic-regular-black: #000000ff;
    --graphic-regular-red: #de4f45;
    --graphic-regular-red-pink: #db798e;
    --graphic-regular-orange-dark: #d69072;
    --graphic-regular-orange: #e9b981;
    --graphic-regular-yellow: #e3dc94;
    --graphic-regular-green: #6cd3a9;
    --graphic-regular-green-medium: #48b381;
    --graphic-regular-green-dark: #46af84;
    --graphic-regular-cyan: #47b6ca;
    --graphic-regular-blue-light: #8398dd;
    --graphic-regular-blue: #7184c4;
    --graphic-regular-blue-dark: #5d68a6;
    --graphic-regular-violet: #c2a7ed;
    --graphic-regular-pink: #da92e0;
    --graphic-regular-rose: #e18cbb;
    --graphic-regular-gray-neutral: #8383a4;
    --graphic-regular-gray-warm: #5d6b78;
    --graphic-regular-gray-light: #292a2b;
    --graphic-regular-gray-dark: #4b525c;
    --graphic-muted-red: #dc766f;
    --graphic-muted-red-pink: #dc748b;
    --graphic-muted-orange-dark: #c8937c;
    --graphic-muted-orange: #e0af73;
    --graphic-muted-yellow: #dfd88d;
    --graphic-muted-green: #77d0ac;
    --graphic-muted-cyan: #6cb6c3;
    --graphic-muted-blue-light: #899cd8;
    --graphic-muted-blue: #798bc6;
    --graphic-muted-blue-dark: #5d6494;
    --graphic-muted-violet: #d1bfed;
    --graphic-muted-pink: #dd9ee2;
    --graphic-muted-rose: #e29bc2;
    --graphic-muted-gray-neutral: #9393a8;
    --graphic-muted-gray-warm: #8b847c;
    --graphic-transparent-white-10: #ffffff1a;
    --graphic-transparent-white-40: #ffffff66;
    --graphic-transparent-white-70: #ffffffb3;
    --graphic-transparent-gray-40: #20293966;
    --graphic-transparent-blue-25: #5d68a640;
    --graphic-transparent-brand-10: #E94E1A1A;
    --graphic-transparent-red-25: #e31b5440;
    --graphic-transparent-yellow-25: #f7900940;
    --graphic-transparent-green-25: #388b6640;
    --graphic-transparent-green-40: #5adda840;
    --graphic-transparent-cyan: #2fbbd547;
    --graphic-transparent-violet: #c3a8ee52;
    --graphic-transparent-pink: #d88ede33;
    --graphic-transparent-gray-neutral: #8383a430;
    --graphic-transparent-gray-warm: #5d6b784a;
  }
}

/* New Design System - Applied when body has 'new-design-system' class */
body.new-design-system {
  /* FONTS MATCHED */
  --fontFamily1: 'Inter', sans-serif;
  --fontFamily2: 'Inter';
  --headingH1: var(--header-300-medium);
  --headingH2: var(--header-150-medium);
  --headingH3: var(--header-100-medium);
  --headingH4: var(--header-50-medium);
  --subtitle1: var(--alt-header-100-semibold);
  --subtitle2: var(--text-400-semibold);
  --subtitle3: var(--text-400-medium);
  --body1: var(--text-200-semibold-high);
  --body2: var(--text-200-medium-high);
  --body3: var(--text-200-semibold);
  --body4: var(--text-200-medium);
  --caption1: var(--text-100-semibold);
  --caption2: var(--text-100-medium);
  --caption3: var(--text-50-semibold);
  --button1: var(--text-200-medium);
  --price1: var(--text-300-semibold);
  --price2: var(--text-100-medium);
  --price3: var(--alt-header-100-semibold);
  --price4: var(--text-100-medium);
  --price5: var(--alt-header-100-semibold);
  --price6: var(--text-200-medium);
}