@font-face {
    font-family: 'Ysabeau Office';
    src: url('/fonts/YsabeauOffice-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 1 1000;
    font-style: normal;
}

@font-face {
    font-family: 'Ysabeau Office';
    src: url('/fonts/YsabeauOffice-Italic-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 1 1000;
    font-style: italic;
}

:root {
    --color-background: #12233B;
    --color-primary-green: #4F9D3B;
    --color-primary-lime: #97BC31;
    --color-primary-gold: #D39A24;
    
    --brand-gradient: linear-gradient(to bottom, var(--color-primary-green), var(--color-primary-lime), var(--color-primary-gold));
}

body {
    font-family: 'Ysabeau Office', sans-serif;
}

.text-gradient {
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

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