:root {
        --color-bg: #ffffff;
    --color-fg: #111111;
    --color-primary: #0f2559;
    --color-on-primary: #ffffff;
    --color-secondary: #6f81aa;
    --color-on-secondary: #ffffff;

    --font-body: Inter, sans-serif;
    --font-heading: Inter, sans-serif;
}

        .theme-light {
        --color-bg: #ffffff;
    --color-fg: #111111;
    --color-primary: #0f2559;
    --color-on-primary: #ffffff;
    --color-secondary: #6f81aa;
    --color-on-secondary: #ffffff;

    background-color: var(--color-bg);
    color: var(--color-fg);
}
            .theme-dark {
        --color-bg: #0f2559;
    --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-light-blue {
        --color-bg: #6f81aa;
    --color-fg: #ffffff;
    --color-primary: #0f2559;
    --color-on-primary: #ffffff;
    --color-secondary: #ffffff;
    --color-on-secondary: #111111;

    background-color: var(--color-bg);
    color: var(--color-fg);
}
            .theme-green {
        --color-bg: #64b1b0;
    --color-fg: #ffffff;
    --color-primary: #0f2559;
    --color-on-primary: #ffffff;
    --color-secondary: #ffffff;
    --color-on-secondary: #111111;

    background-color: var(--color-bg);
    color: var(--color-fg);
}
            .theme-blue {
        --color-bg: #5599bf;
    --color-fg: #ffffff;
    --color-primary: #0f2559;
    --color-on-primary: #ffffff;
    --color-secondary: #ffffff;
    --color-on-secondary: #111111;

    background-color: var(--color-bg);
    color: var(--color-fg);
}
            .theme-gray {
        --color-bg: #80919b;
    --color-fg: #ffffff;
    --color-primary: #0f2559;
    --color-on-primary: #ffffff;
    --color-secondary: #ffffff;
    --color-on-secondary: #111111;

    background-color: var(--color-bg);
    color: var(--color-fg);
}
            .theme-light-gray {
        --color-bg: #ecf0f1;
    --color-fg: #0f2559;
    --color-primary: #9a1d1d;
    --color-on-primary: #ecf0f1;
    --color-secondary: #0f2559;
    --color-on-secondary: #ecf0f1;

    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;
}