html, body {
    background-color: var(--primary-bg-end); /* Use your darkest background color */
}

@font-face {
    font-family: 'Spartan Regular';
    src: url('../../../Fonts/Spartan/spartan/static/Spartan-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Spartan Bold';
    src: url('../../../Fonts/Spartan/spartan/static/Spartan-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Spartan Black';
    src: url('../../../Fonts/Spartan/spartan/static/Spartan-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

:root {
    --primary-bg-start: #2A2A4A;
    --primary-bg-end: #1A1A2A;
    --shadow-color: rgba(0, 0, 0, 0.5); /* Subtle shadow for text */
    /* New Unified Color Palette */
    --color-hover: #B4B2DC; /* For highlighting on mouse hover */
    --color-primary: #92B7D4; /* For initial buttons and normal body text */
    --color-selected: #C1897B; /* For clicked/selected elements */
    --color-header: #A0E0FF; /* For headers */
    /* Fonts */
    --font-body: 'Spartan Regular', Arial, sans-serif;
    --font-navigation: 'Spartan Bold', sans-serif;
    --font-heading: 'Spartan Black', sans-serif;
}