@import url('https://fonts.googleapis.com/css2?family=Frank+Ruhl+Libre:wght@300;400;500;700&display=swap');

html {
    font-size: 16px;
}

:root {
    /* Colors */
    --white-color: #FFFFFF;
    --goldenBrown: #B09551;
    --darkGray: #2E2E33;
    --deepRed: #891038;
    --lightGray: #F8F8F8;
    --mediumGray: #E3E2E4;
    --beige: #E5DCC3;

    /* Typography */
    --font-primary: 'Frank Ruhl Libre', sans-serif;
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-bold: 700;
}


/* Color variations */
.text-darkGray {
    color: var(--darkGray);
}

.text-golden {
    color: var(--goldenBrown);
}

.text-white {
    color: var(--white-color);
}

/* Color variations Background */
.bg-darkGray {
    background-color: var(--darkGray);
}

.bg-lightGray {
    background-color: var(--lightGray);
}

.bg-mediumGray {
    background-color: var(--mediumGray);
}

/* Body */

body {
    font-family: var(--font-primary) !important;
    font-weight: var(--font-weight-light) !important;
}

/* Utility text classes */
.text {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-light);
    color: var(--darkGray);
    line-height: 1.5;
}

/* Default für extra small (xs) Geräte (<576px) */
.text-60 {
    font-size: 1.75rem; /* 40px */
    font-weight: var(--font-weight-light);
}

.text-40 {
    font-size: 1.7rem; /* 28px */
    font-weight: var(--font-weight-light);
    line-height: 1.25 !important;
}

.text-20 {
    font-size: 1rem; /* 16px */
    font-weight: var(--font-weight-light);
}

.text-18 {
    font-size: 0.9rem; /* 14px */
    font-weight: var(--font-weight-light);
}

/* Small (sm) Geräte (≥576px) */
@media screen and (min-width: 576px) {
    .text-60 {
        font-size: 3rem; /* 48px */
    }

    .text-40 {
        font-size: 1.9rem; /* 32px */
        line-height: 1.5 !important;
    }

    .text-20 {
        font-size: 1.125rem; /* 18px */
    }

    .text-18 {
        font-size: 1rem; /* 16px */
    }
}

/* Medium (md) Geräte (≥768px) */
@media screen and (min-width: 768px) {
    .text-60 {
        font-size: 3.5; /* 60px */
    }

    .text-40 {
        font-size: 2.25rem; /* 40px */
        line-height: 1 !important;
    }

    .text-20 {
        font-size: 1.25rem; /* 20px */
    }

    .text-18 {
        font-size: 1.125rem; /* 18px */
    }
}

/* Large (lg) Geräte (≥992px) */
@media screen and (min-width: 992px) {
    .text-60 {
        font-size: 3.25rem; /* 64px */
    }
    
    .text-40 {
        font-size: 2.5rem; /* 48px */
    }

    .text-20 {
        font-size: 1.2rem; /* 24px */
    }

    .text-18 {
        font-size: 1.1rem; /* 20px */
    }
}

/* Extra large (xl) Geräte (≥1200px) */
@media screen and (min-width: 1200px) {
    .text-60 {
        font-size: 3.75rem; /* 72px */
    }
    
    .text-40 {
        font-size: 2.5rem; /* 56px */
        line-height: 1 !important;
    }

    .text-20 {
        font-size: 1.25rem; /* 20px */
    }

    .text-18 {
        font-size: 1.5rem; /* 24px */
    }
}

/* Extra extra large (xxl) Geräte (≥1400px) */
@media screen and (min-width: 1400px) {
    .text-60 {
        font-size: 3.75rem;
    }

    .text-40 {
        font-size: 2.5rem; /* 64px */
        line-height: 1 !important;
    }

    .text-20 {
        font-size: 1.25rem; 
    }

    .text-18 {
        font-size: 1.25rem; /* 28px */
    }
}