/* vars.css */

@font-face {
    font-family: 'Outfit';
    src: url('../fonts/Outfit-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Outfit';
    src: url('../fonts/Outfit-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Outfit';
    src: url('../fonts/Outfit-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Outfit';
    src: url('../fonts/Outfit-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}


/* Define CSS Variables for colors, fonts, spacing and breakpoints */
:root {
    /* Color Palette */
    --dark-color: #27282c;
    --navigation-btn-color: #fede3b;
    --navigation-btn-color-hover: #ffc83d;
    --game-card-play-btn-color: #48c034;
    --game-card-play-btn-color-hover: #379b28;

    /* Optional Background and Text Colors */
    --bg-color: #f0f0f0;
    --text-color: #212529;

    /* Typography */
    --font-family: 'Outfit', Helvetica, Arial, sans-serif;
    --font-size-base: 1.6rem; /* 16px */
    --font-size-lg: 1.8rem;
    --font-size-sm: 1.4rem;

    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 3rem;
    --spacing-xl: 4rem;

    /* Breakpoints for responsive design */
    --breakpoint-xs: 480px;
    --breakpoint-sm: 768px;
    --breakpoint-md: 1024px;
    --breakpoint-lg: 1200px;
    --breakpoint-xl: 1440px;
}