@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
:root {
    /* =========================
        TEXT COLORS
    ========================= */
    --text-primary: var(--color-text0);
    --text-secondary: var(--color-text1);
    --text-muted: var(--color-text2);

    --text-error: var(--color-state2);
    --text-warning: var(--color-state1);
    --text-succes: var(--color-state0);

    /* =========================
        FONT SIZES
    ========================= */
    --font-xs: 0.625rem;
    --font-sm: 1rem;
    --font-md: 1.625rem;
    --font-lg: 2.625rem;
    --font-xl: 4.25rem;

    /* =========================
        FONT WEIGHT
    ========================= */
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-bold: 700;

    /* =========================
        LINE HEIGHT
    ========================= */
    --line-sm: 1.2;
    --line-md: 1.5;
    --line-lg: 1.8;

    /* =========================
        FONT FAMILY
    ========================= */
    --font-primary: "Space Grotesk", sans-serif;
    --font-secondary: "Raleway", sans-serif;
    --font-all: var(--font-primary), var(--font-secondary)
}