:root {
    /* === Font Families (Local Names Registered in MauiProgram.cs) === */
    --font-title: 'MontserratBold', 'Montserrat', 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
    --font-body: 'RobotoCondensedRegular', 'Roboto Condensed', 'Roboto', 'Open Sans', Arial, sans-serif;
    --font-body-bold: 'RobotoCondensedBold', 'Roboto Condensed Bold', 'Roboto Bold', 'Open Sans Bold', Arial, sans-serif;
    --font-decorative: 'EurostileRegular', 'EuroStyle', 'Orbitron', 'Rajdhani', 'Arial Black', sans-serif;
    /* === Colors === */
    --color-black: #1A1A1A;
    --color-red: #EA0029;
    --color-white: #FFFFFF;
    --color-blue-primary: #000F9F;
    --color-blue-secondary: #003FE5;
    --color-grey: #F2F2F2;
}

/* === Font Utility Classes === */
.font-title {
    font-family: var(--font-title);
}

.font-body {
    font-family: var(--font-body);
}

.font-body-bold {
    font-family: var(--font-body-bold);
}

.font-decorative {
    font-family: var(--font-decorative);
}

/* === Text Size Utility Classes === */
.text-xl {
    font-size: 2.5rem;
    font-weight: 700;
}

.text-lg {
    font-size: 1.75rem;
    font-weight: 600;
}

.text-md {
    font-size: 1.5rem;
    font-weight: 500;
}

.text-base {
    font-size: 1rem;
    font-weight: 400;
}

.text-sm {
    font-size: 0.875rem;
}

/* === Color Utility Classes === */
.text-black {
    color: var(--color-black);
}

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

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

.text-blue-primary {
    color: var(--color-blue-primary);
}

.text-blue-secondary {
    color: var(--color-blue-secondary);
}

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

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

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

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

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

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

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

/* === Default Element Styles === */
body {
    color: var(--color-black);
    font-family: var(--font-body);
}

h1 {
    font-family: var(--font-title);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-black);
}

h2 {
    font-family: var(--font-body);
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--color-black);
}

h3 {
    font-family: var(--font-body);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--color-black);
}

p {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-black);
}

.small-text {
    font-size: 0.875rem;
    font-family: var(--font-body);
    color: var(--color-black);
}

.decorative-text,
blockquote,
.subtext {
    font-family: var(--font-decorative);
    font-size: 0.875rem;
    font-style: italic;
    color: var(--color-blue-secondary);
}