@font-face {
    font-family: Montserrat-Bold;
    src: url("../assets/fonts/Montserrat/static/Montserrat-Bold.ttf");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: Press_Start_2P;
    src: url("../assets/fonts/Press_Start_2P/PressStart2P-Regular.ttf");
    font-weight: 400;
    font-style: normal;
}



:root {
    /* === Colors === */
    --color-background: #F2F2F2;
    --color-text-black: #000000;
    --color-text-white: #FFFFFF;
    --color-border: #cccccc;

    --color-title-item: #000000;
    --color-black: #000000;
    --color-teal: #377E7F;
    --color-blue: #1200F5;
    --color-navy: #04007B;
    --color-lime: #75FC4C;
    --color-white: #FFFFFF;
    --color-purple: #75147C;
    --color-yellow: #F9FB53;
    --color-olive: #7C7C25;
    --color-red: #EA3423;
    --color-maroon: #75140C;
    --color-gray: #808080;
    --color-olivedrab: #738D37;
    --color-deep-sky-blue: #56BDF9;
    --color-fuchsia: #EA33F7;
    --color-green: #377E22;

    /* === Layout === */
    
    --padding-small: 10px;
    --padding-medium: 20px;
    --padding-large: 30px;

    --gap-small: 10px;
    --gap-medium: 20px;
    --gap-large: 30px;

    --border-radius: 10px;

    /* === Typography === */

    --font-family-body: 'Montserrat-Bold', sans-serif;
    --font-family-items: 'Press_Start_2P', sans-serif;

    --text-xs: 0.75rem;     /* 12px */
    --text-sm: 0.875rem;    /* 14px */
    --text-base: 1rem;      /* 16px */
    --text-lg: 1.125rem;    /* 18px */
    --text-xl: 1.25rem;     /* 20px */
    --text-2xl: 1.5rem;     /* 24px */
    --text-3xl: 1.875rem;   /* 30px */
    --text-4xl: 2.25rem;    /* 36px */
    --text-5xl: 3rem;       /* 48px */

}