:root {
        --color-bg: #ffffff;
    --color-fg: #111111;
    --color-primary: #0F2758;
    --color-on-primary: #ffffff;
    --color-secondary: #991E1D;
    --color-on-secondary: #ffffff;

    --font-body: Lora, Georgia, serif;
    --font-heading: Inter, sans-serif;
    --color-success: #0d7a3b;
    --color-on-success: #ffffff;
    --color-danger: #9a1d1d;
    --color-on-danger: #ffffff;
}

        .theme-light {
        --color-bg: #ffffff;
    --color-fg: #111111;
    --color-primary: #0F2758;
    --color-on-primary: #ffffff;
    --color-secondary: #991E1D;
    --color-on-secondary: #ffffff;

    background-color: var(--color-bg);
    color: var(--color-fg);
}
            .theme-dark {
        --color-bg: #0F2758;
    --color-fg: #ffffff;
    --color-primary: #ffffff;
    --color-on-primary: #111111;
    --color-secondary: #6f81aa;
    --color-on-secondary: #ffffff;

    background-color: var(--color-bg);
    color: var(--color-fg);
}
            .theme-red {
        --color-bg: #991E1D;
    --color-fg: #ffffff;
    --color-primary: #681414;
    --color-on-primary: #ffffff;
    --color-secondary: #ffffff;
    --color-on-secondary: #681414;

    background-color: var(--color-bg);
    color: var(--color-fg);
}
            .theme-red-dark {
        --color-bg: #681414;
    --color-fg: #ffffff;
    --color-primary: #991E1D;
    --color-on-primary: #ffffff;
    --color-secondary: #ffffff;
    --color-on-secondary: #681414;

    background-color: var(--color-bg);
    color: var(--color-fg);
}
    
body {
    background-color: var(--color-bg);
    color: var(--color-fg);
    font-family: var(--font-body), sans-serif;
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading), sans-serif;
}