html {

    /* COLORS */
    --primary-brand-100: rgb(253, 239, 239);
    --primary-brand-200: rgb(255, 230, 230);
    --primary-brand-300: rgb(231, 118, 112);
    --primary-brand-500: rgb(231, 43, 30);
    --primary-brand-700: rgb(150, 7, 0);
    --primary-brand-900: rgb(32, 7, 6);

    --menu-color-1: rgb(255, 88, 0);
    --menu-color-2: rgb(35, 159, 250);
    --menu-color-3: rgb(250, 35, 159);
    --menu-color-4: rgb(255, 196, 0);
    --menu-color-5: rgb(182, 117, 237);
    --menu-color-7: rgb(9, 211, 180);
    --menu-color-9: rgb(106, 203, 0);

    --neutral-black: rgb(7, 7, 7);
    --neutral-900: rgb(15, 23, 42);
    --neutral-800: rgb(30, 41, 59);
    --neutral-700: rgb(51, 65, 85);
    --neutral-600: rgb(71, 85, 105);
    --neutral-500: rgb(100, 116, 139);
    --neutral-400: rgb(148, 163, 184);
    --neutral-300: rgb(203, 213, 225);
    --neutral-200: rgb(226, 232, 240);
    --neutral-100: rgb(241, 245, 249);
    --neutral-white: rgb(255, 255, 255);

    --success: rgb(146, 211, 153);
    --success-txt: rgb(67, 86, 69);
    --success-bg: rgb(217, 241, 220);

    --wrong: rgb(221, 100, 100);
    --wrong-txt: rgb(167, 37, 37);
    --wrong-bg: rgb(246, 213, 213);


    /* CTA */
    --cta-color: var(--primary-brand-500);
    --cta-color-hover: var(--primary-brand-700);
    --cta-color-active: var(--primary-brand-300);
    --cta-color-border: var(--primary-brand-500);
    --cta-color-border-hover: var(--primary-brand-700);
    --cta-color-border-active: var(--primary-brand-500);
    --cta-color-txt: var(--primary-brand-100);
    --cta-color-txt-hover: var(--primary-brand-100);
    --cta-color-txt-active: var(--primary-brand-100);

    --cta-secondary-color: var(--neutral-white);
    --cta-secondary-color-hover: var(--primary-brand-500);
    --cta-secondary-color-active: var(--primary-brand-300);
    --cta-secondary-color-border: var(--primary-brand-500);
    --cta-secondary-color-border-hover: var(--primary-brand-500);
    --cta-secondary-color-border-active: var(--primary-brand-300);
    --cta-secondary-color-txt: var(--primary-brand-500);
    --cta-secondary-color-txt-hover: var(--primary-brand-100);
    --cta-secondary-color-txt-active: var(--primary-brand-300);


    /* LINKS */
    --link-color: var(--neutral-900);
    --link-color-hover: var(--primary-brand-500);
    --link-color-active: var(--primary-brand-700);

    /* FOOTER */


    /* TABS */
    --tab-color: var(--primary-brand-100);
    --tab-color-txt: var(--primary-brand-700);
    --tab-color-hover: var(--primary-brand-300);
    --tab-color-active: var(--primary-brand-500);
    --tabcontent-color: var(--neutral-white);
    --tabcontent-border-color: var(--primary-brand-500);


    /* OTHERS */
    --dark: var(--neutral-900);
    --accent: var(--neutral-100);
    --highlight: rgb(255, 217, 0);
    --bg-page-color: var(--neutral-white);
    --price-color: var(--neutral-900);

    --btn-color: var(--primary-brand-500);
    --btn-color-hover: var(--primary-brand-700);
    --btn-color-active: var(--primary-brand-300);

    /* FONTS */
    /* Poppins */
    --font1-light: "poppins-light";
    --font1-regular: "poppins-regular";
    --font1-medium: "poppins-medium";
    --font1-semibold: "poppins-semibold";

    /*Open Sans*/
    --font2-light: "opensans-light";
    --font2-regular: "opensans-regular";
    --font2-semibold: "opensans-semibold";
    --font2-bold: "opensans-bold";


    /* SIZES */
    --xl-txt: 2.4rem;
    --reg-txt: 1.6rem;
    --sm-txt: 1.4rem;
    --xs-txt: 1.4rem;

    /* BORDER RADIUS */
    --border-radius-reg: .8rem;
    --border-radius-sm: .6rem;
    --border-radius-xs: .2rem;
    --border-radius-pill: 4rem;


    /* SHADOWS */
    --shadow-color: rgb(46, 46, 46);

    --shadow-elevation-low:
    0.3px 0.5px 0.7px rgba(46, 46, 46, 0.1),
    0.4px 0.8px 1px -1.2px rgba(46, 46, 46, 0.1),
    1px 2px 2.5px -2.5px rgba(46, 46, 46, 0.1);

    --shadow-elevation-medium:
    0.3px 0.5px 0.7px rgba(46, 46, 46, 0.05),
    0.8px 1.6px 2px -0.8px rgba(46, 46, 46, 0.05),
    2.1px 4.1px 5.2px -1.7px rgba(46, 46, 46, 0.05),
    5px 10px 12.6px -2.5px rgba(46, 46, 46, 0.05),
    0px -1px 1px 0px rgba(46, 46, 46, 0.05);

    --shadow-elevation-high:
    0.3px 0.3px 0.5px rgba(46, 46, 46, 0.03),
    1.4px 1.4px 2.2px -0.4px rgba(46, 46, 46, 0.03),
    2.6px 2.5px 4.1px -0.7px rgba(46, 46, 46, 0.03),
    4.2px 4.1px 6.6px -1.1px rgba(46, 46, 46, 0.03),
    6.7px 6.5px 10.5px -1.4px rgba(46, 46, 46, 0.03),
    10.4px 10.1px 16.3px -1.8px rgba(46, 46, 46, 0.03),
    15.9px 15.4px 24.9px -2.1px rgba(46, 46, 46, 0.03),
    23.3px 22.6px 36.5px -2.5px rgba(46, 46, 46, 0.03);

}