:root {
  --baseWhite: #ffffff;

  /* COLORS */
  --brandAtom900: #da003f;
  --brandAtom700: #fc003d;
  --headerBackground: #da003f;
  --brandAtom100: #ffe2e9;
  --brandAtom50: #fff0f4;

  --navBarIconFill: #fd3263;
  --headerApp: #da003f;
  --brandTwo700: #fc003d;

  --seed900: #4a494a;
  --seed800: #6e6d6e;
  --seed500: #868686;
  --seed400: #9f9e9f;
  --seed300: #b7b6b7;
  --seed200: #cfcecf;
  --seed100: #e7e7e7;
  --seed50: #f7f7f7;
  --seed00: #ffffff;

  --system500Suc: #138a40;
  --system50Suc: #e7f7ed;
  --system500War: #f6821f;
  --system50War: #fff1e5;
  --system500Err: #f04728;
  --system50Err: #ffefec;
  --system050OverlayMode: rgba(0, 0, 0, 0.5);
  --system070DisabledMode: rgba(255, 255, 255, 0.7);
  --system020HoverMode: #b0aeac33;

  --checkbox: #a6a934;

  --star: #ffe32e;
  --like: #fc003d;
  --footer: #4a494a;
  --buttonPrimary: #da003f;
  --buttonPrimaryHover: #e02b5f;
  --buttonSecondary: #ffe2e9;
  --buttonSecondaryHover: #fec1d1;
  --buttonCircle: #da003f;
  --buttonCircleIcon: #ffffff;

  --badgeExpress: #85003f;
  --badgeDiscount: #da003f;
  --badgeMulti: #ffe2e9;
  --badgeBundle: #e02b5f;
  --badgeCounter: #85003f;

  --input200InputHov: #cfcecf;
  --input50InputDefault: #f7f7f7;

  --text00Inv: #ffffff;
  --text900Prim: #4a494a;
  --text400Sec: #9f9e9f;
  --text300Tre: #b7b6b7;
  --text700Acc: #da003f;
  --textHeader: #ffffff;
  --textTitle: #da003f;
  --textButtonPrim: #ffffff;
  --textCategory: #4a494a;
  --textProductCard: #4a494a;

  /* FONTS */
  --headingH1: 900 32px / 40px "RecoletaBlack";
  --headingH2: 900 24px / 32px "Helvetica Neue";
  --headingH3: 900 18px / 24px "Helvetica Neue";
  --headingH4: 900 15px / 24px "Helvetica Neue";

  --subtitle1: 700 24px / 24px "Helvetica Neue";
  --subtitle2: 700 18px / 24px "Helvetica Neue";
  --subtitle3: 500 18px / 24px "Helvetica Neue";

  --body1: 700 15px / 24px "OpenSans";
  --body2: 400 15px / 24px "OpenSans";
  --body3: 700 14px / 16px "OpenSans";
  --body4: 400 14px / 16px "OpenSans";

  --caption1: 700 12px / 16px "OpenSans";
  --caption2: 400 12px / 16px "OpenSans";
  --caption3: 700 8px / 12px "OpenSans";

  --button1: 500 14px / 16px 'Helvetica Neue';
  --button2: 700 9px / 16px 'Helvetica Neue';

  --price1: 700 16px / 18px "OpenSans";
  --price2: 400 12px / 14px "OpenSans";
  --price3: 700 24px / 24px "OpenSans";
  --price4: 400 14px / 16px "OpenSans";
  --price5: 700 32px / 40px "OpenSans";
  --price6: 400 18px / 24px "OpenSans";

  /* NUTRITION */
  --nutritionLow: #0eb44d;
  --nutritionLowBg: #e7f7ed;
  --nutritionMedium: #f97313;
  --nutritionMediumBg: #fef1e7;
  --nutritionHigh: #e5243f;
  --nutritionHighBg: #fce9ec;

  --tileMask: linear-gradient(transparent);
  --tileMaskHalf: linear-gradient(transparent);


  --fontFamily1: "OpenSans";
  --fontFamily2: "OpenSans";
  --fontFamily3: "RecoletaBlack";
  
  --font-heading: var(--fontFamily3);
  --font-heading-alt: var(--fontFamily2);
  --font-text: var(--fontFamily1);

  /* NEW TOKENS FROM FIGMA */

  /* System */
  --system-success: #388b66;
  --system-success-hover: #287d5a;
  --system-warning: #d4a541;
  --system-warning-hover: #7c6123;
  --system-warning-bright: #7c6123;
  --system-error: #f63d68;
  --system-error-hover: #e31b54;
  --system-error-light: #ff6384;
  --system-error-subtle: #e31b541a;
  --system-error-medium: #e31b542b;
  --system-warning-subtle: #fa86551f;
  --system-warning-medium: #fa86552b;
  --system-success-subtle: #0676471a;
  --system-success-medium: #0676472b;
  --system-neutral-1-subtle: #da003f1a;
  --system-neutral-1-medium: #da003f40;
  --system-neutral-2-subtle: #d7d9db52;
  --system-neutral-2-medium: #d7d9db80;
  --system-link: #675688;
  --system-link-hover: #473b5e;
  --system-success-inverse: #388b66;
  --system-success-hover-inverse: #287d5a;
  --system-warning-inverse: #d4a541;
  --system-warning-hover-inverse: #7c6123;
  --system-warning-bright-inverse: #7c6123;
  --system-error-inverse: #f63d68;
  --system-error-hover-inverse: #e31b54;
  --system-error-light-inverse: #ff6384;
  --system-error-subtle-inverse: #e31b542b;
  --system-error-medium-inverse: #e31b5440;
  --system-warning-subtle-inverse: #fa86551f;
  --system-warning-medium-inverse: #fa86552b;
  --system-success-subtle-inverse: #0676471a;
  --system-success-medium-inverse: #0676472b;
  --system-neutral-1-subtle-inverse: #da003f2b;
  --system-neutral-1-medium-inverse: #da003f40;
  --system-neutral-2-subtle-inverse: #d7d9db52;
  --system-neutral-2-medium-inverse: #d7d9db80;
  --system-link-inverse: #7f6ca3;
  --system-link-hover-inverse: #473b5e;

  /* BORDER RADIUS */
  --border-radius--0: 0px;
  --border-radius--100: 4px;
  --border-radius--10: 4px;
  --border-radius--200: 6px;
  --border-radius--20: 6px;
  --border-radius--300: 8px;
  --border-radius--30: 8px;
  --border-radius--400: 12px;
  --border-radius--40: 12px;
  --border-radius--500: 16px;
  --border-radius--50: 16px;
  --border-radius--550: 20px;
  --border-radius--55: 20px;
  --border-radius--600: 24px;
  --border-radius--60: 24px;
  --border-radius--650: 24px;
  --border-radius--65: 32px;
  --border-radius--700: 24px;
  --border-radius--70: 48px;
  --border-radius--800: 72px;
  --border-radius--80: 72px;
  --border-radius--1000: 9999px;
  --border-radius--100: 9999px;

  /* Text */
  --text-primary: #121517;
  --text-secondary: #000000a3;
  --text-tertiary: #00000080;
  --text-placeholder: #da003f59;
  --text-disabled: #2d2f3340;
  --text-in-button: #ffffff;
  --text-brand: #da003f;
  --text-primary-inverse: #fcfcfd;
  --text-secondary-inverse: #d7d9dba3;
  --text-tertiary-inverse: #d7d9db80;
  --text-disabled-inverse: #d7d9db66;
  --text-brand-inverse: #da003f;

  /* Icon */
  --icon-primary: #121517;
  --icon-secondary: #000000a3;
  --icon-tertiary: #00000080;
  --icon-placeholder: #da003f59;
  --icon-disabled: #2d2f3340;
  --icon-in-button: #ffffff;
  --icon-brand: #da003f;
  --icon-primary-inverse: #fcfcfd;
  --icon-secondary-inverse: #d7d9dba3;
  --icon-tertiary-inverse: #d7d9db80;
  --icon-disabled-inverse: #d7d9db66;
  --icon-brand-inverse: #da003f;

  /* Stroke */
  --stroke-primary: #2d2f332b;
  --stroke-secondary: #2d2f3324;
  --stroke-tertiary: #2d2f331a;
  --stroke-quaternary: #2d2f330f;
  --stroke-strong: #000000;
  --stroke-brand: #da003f;
  --stroke-brand-subtle: #f899b5;
  --stroke-primary-inverse: #d7d9db52;
  --stroke-secondary-inverse: #d7d9db2e;
  --stroke-tertiary-inverse: #d7d9db24;
  --stroke-quaternary-inverse: #d7d9db1a;
  --stroke-strong-inverse: #ffffff;
  --stroke-brand-inverse: #f84679;
  --stroke-brand-subtle-inverse: #f899b5;

  /* Bg */
  --bg-base: #ffffff;
  --bg-base-stable: #ffffff;
  --bg-content: #ffffff;
  --bg-base-inverse: #1b1722;
  --bg-base-stable-inverse: #1b1722;
  --bg-content-inverse: #1b1722;

  /* Surface */
  --surface-transparent-1: #2d2f330a;
  --surface-transparent-2: #2d2f330f;
  --surface-transparent-3: #2d2f331a;
  --surface-transparent-4: #2d2f3340;
  --surface-transparent-5: #2d2f3359;
  --surface-transparent-6: #2d2f3380;
  --surface-transparent-7: #2d2f33a3;
  --surface-transparent-8: #000000b8;
  --surface-transparent-9: #000000eb;
  --surface-transparent-1-inverse: #d7d9db12;
  --surface-transparent-2-inverse: #d7d9db1a;
  --surface-transparent-3-inverse: #d7d9db24;
  --surface-transparent-4-inverse: #d7d9db52;
  --surface-transparent-5-inverse: #d7d9db66;
  --surface-transparent-6-inverse: #d7d9db80;
  --surface-transparent-7-inverse: #d7d9dba3;
  --surface-transparent-8-inverse: #ffffffb8;
  --surface-transparent-9-inverse: #ffffffeb;

  /* Action */
  --action-brand: #da003f;
  --action-brand-hover: #c20139;
  --action-primary: #2b2439;
  --action-primary-hover: #2b2439;
  --action-secondary: #dad4e5;
  --action-secondary-hover: #baafcf;
  --action-secondary-transparent: #da003f1a;
  --action-secondary-transparent-hover: #da003f2b;
  --action-brand-inverse: #da003f;
  --action-brand-hover-inverse: #c20139;
  --action-primary-inverse: #ffffff;
  --action-primary-hover-inverse: #ffffffeb;
  --action-secondary-inverse: #dad4e5;
  --action-secondary-hover-inverse: #baafcf;
  --action-secondary-transparent-inverse: #da003f1a;
  --action-secondary-transparent-hover-inverse: #da003f2b;

  /* Navigation */
  --navigation-text-primary: #ffffff;
  --navigation-text-secondary: #ffffffcc;
  --navigation-text-tertiary: #ffffffa3;
  --navigation-text-in-button: #da003f;
  --navigation-text-in-button-2: #da003f;
  --navigation-text-brand: #da003f;
  --navigation-icon-primary: #ffffff;
  --navigation-icon-secondary: #ffffffa3;
  --navigation-icon-tertiary: #ffffffa3;
  --navigation-icon-in-button: #da003f;
  --navigation-icon-in-button-2: #da003f;
  --navigation-icon-brand: #da003f;
  --navigation-stroke-primary: #da003f;
  --navigation-stroke-secondary: #ffffff52;
  --navigation-stroke-tertiary: #ffffff40;
  --navigation-stroke-strong: #ffffff;
  --navigation-stroke-brand: #da003f;
  --navigation-stroke-brand-subtle: #f899b5;
  --navigation-bg: #c20139;
  --navigation-bg-2: #ffffff;
  --navigation-action-brand: #ffffff;
  --navigation-action-brand-hover: #ffffffeb;
  --navigation-action-primary: #ffffff;
  --navigation-action-primary-hover: #000000eb;
  --navigation-surface: #0000002e;
  --navigation-surface-2: #00000040;

  /* Graphic */
  --graphic-regular-white: #ffffff;
  --graphic-regular-black: #000000;
  --graphic-regular-brand: #da003f;
  --graphic-regular-brand-light: #f25885;
  --graphic-regular-brand-hover: #da003f;
  --graphic-regular-brand-2: #551d72;
  --graphic-regular-multibuy: #388b66;
  --graphic-regular-discount: #da003f;
  --graphic-regular-review: #551d72;
  --graphic-regular-red: #da003f;
  --graphic-regular-red-pink: #f95792;
  --graphic-regular-orange-dark: #d78460;
  --graphic-regular-orange: #f79575;
  --graphic-regular-yellow: #fde97c;
  --graphic-regular-green: #69e5b3;
  --graphic-regular-green-medium: #48b381;
  --graphic-regular-green-dark: #3a9e75;
  --graphic-regular-green-dark-2: #0b643b;
  --graphic-regular-cyan: #69d0e4;
  --graphic-regular-blue-light: #7baff3;
  --graphic-regular-blue: #044dae;
  --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: #f2f3f3;
  --graphic-regular-gray-light-2: #e6e7e8;
  --graphic-regular-gray-dark: #363a40;
  --graphic-muted-red: #e69b95;
  --graphic-muted-red-pink: #f8edef;
  --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-7: #ffffff12;
  --graphic-transparent-white-10: #ffffff1a;
  --graphic-transparent-white-14: #ffffff24;
  --graphic-transparent-white-25: #ffffff40;
  --graphic-transparent-white-40: #ffffff66;
  --graphic-transparent-white-55: #ffffff8c;
  --graphic-transparent-white-70: #ffffffb2;
  --graphic-transparent-white-92: #ffffffeb;
  --graphic-transparent-black-5: #0000000d;
  --graphic-transparent-black-10: #0000001a;
  --graphic-transparent-black-15: #00000026;
  --graphic-transparent-black-25: #00000040;
  --graphic-transparent-black-40: #00000066;
  --graphic-transparent-black-55: #0000008c;
  --graphic-transparent-black-70: #000000b2;
  --graphic-transparent-black-92: #000000eb;
  --graphic-transparent-gray-40: #20293966;
  --graphic-transparent-blue-25: #5d68a640;
  --graphic-transparent-blue-10: #5d68a61a;
  --graphic-transparent-red-25: #e31b5440;
  --graphic-transparent-yellow-25: #f7900940;
  --graphic-transparent-green-25: #388b6640;
  --graphic-transparent-green-dark-2-25: #0b643b40;
  --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;
  --graphic-transparent-brand-0: #da003f00;
  --graphic-transparent-brand-10: #da003f1a;
  --graphic-transparent-brand-15: #da003f26;
  --graphic-transparent-brand-25: #da003f40;
  --graphic-transparent-brand-35: #da003f59;
  --graphic-transparent-brand-50: #da003f80;
  --graphic-transparent-brand-75: #da003fbf;
  --graphic-transparent-brand-100: #da003f;
  --graphic-transparent-brand-2-0: #00000000;
  --graphic-transparent-brand-2-10: #0000001a;
  --graphic-transparent-brand-2-15: #00000026;
  --graphic-transparent-brand-2-25: #00000040;
  --graphic-transparent-brand-2-35: #00000059;
  --graphic-transparent-brand-2-50: #00000080;
  --graphic-transparent-brand-2-75: #000000bf;
  --graphic-transparent-brand-2-100: #000000;
}