@font-face {
    font-family: LatoBlack;
    weight: bold;
    style: normal;
    src: url("../assets/fonts/Lato/Lato-Black.ttf");
}

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

@font-face {
    font-family: Playwrite;
    src: url("../assets/fonts/Playwrite/PlaywriteGBS-LightItalic.ttf");
    weight: 300;
    style: normal;
}

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

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

    --border-radius: 20px;

    /* === Colors === */
    --color-bg: #dbd9d9;
    --color-card-bg: #fff;
    
    --color-title: #000000;
    --color-paragraph: #808080;
    
    /* === Typography === */
    --font-family-title: LatoBlack, sans-serif;
    --font-family-subtitle: LatoRegular, sans-serif;
    --font-family-paragraph: Playwrite, 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 */

}