:root {
        --color-bg: #ffffff;
    --color-fg: #000000;
    --color-primary: #ffcd00;
    --color-on-primary: #000000;
    --color-secondary: #0b60ae;
    --color-on-secondary: #ffffff;

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

        .theme-light {
        --color-bg: #ffffff;
    --color-fg: #000000;
    --color-primary: #ffcd00;
    --color-on-primary: #000000;
    --color-secondary: #0b60ae;
    --color-on-secondary: #ffffff;

    background-color: var(--color-bg);
    background-image:
        radial-gradient(
            ellipse 70% 60% at 0% 0%,
            color-mix(in oklab, var(--color-primary), transparent 75%),
            transparent 60%
        ),
        radial-gradient(
            ellipse 60% 50% at 100% 100%,
            color-mix(in oklab, var(--color-secondary), transparent 80%),
            transparent 60%
        ),
        linear-gradient(
            135deg,
            var(--color-bg),
            color-mix(in oklab, var(--color-bg), var(--color-fg) 8%)
        );
    color: var(--color-fg);
}
            .theme-gray {
        --color-bg: #f9f9f9;
    --color-fg: #000000;
    --color-primary: #ffcd00;
    --color-on-primary: #000000;
    --color-secondary: #0b60ae;
    --color-on-secondary: #ffffff;

    background-color: var(--color-bg);
    background-image:
        radial-gradient(
            ellipse 70% 60% at 0% 0%,
            color-mix(in oklab, var(--color-primary), transparent 75%),
            transparent 60%
        ),
        radial-gradient(
            ellipse 60% 50% at 100% 100%,
            color-mix(in oklab, var(--color-secondary), transparent 80%),
            transparent 60%
        ),
        linear-gradient(
            135deg,
            var(--color-bg),
            color-mix(in oklab, var(--color-bg), var(--color-fg) 8%)
        );
    color: var(--color-fg);
}
            .theme-dark {
        --color-bg: #000000;
    --color-fg: #ffffff;
    --color-primary: #ffcd00;
    --color-on-primary: #000000;
    --color-secondary: #0b60ae;
    --color-on-secondary: #ffffff;

    background-color: var(--color-bg);
    background-image:
        radial-gradient(
            ellipse 70% 60% at 0% 0%,
            color-mix(in oklab, var(--color-primary), transparent 75%),
            transparent 60%
        ),
        radial-gradient(
            ellipse 60% 50% at 100% 100%,
            color-mix(in oklab, var(--color-secondary), transparent 80%),
            transparent 60%
        ),
        linear-gradient(
            135deg,
            var(--color-bg),
            color-mix(in oklab, var(--color-bg), var(--color-fg) 8%)
        );
    color: var(--color-fg);
}
            .theme-blue {
        --color-bg: #0b60ae;
    --color-fg: #ffffff;
    --color-primary: #ffcd00;
    --color-on-primary: #000000;
    --color-secondary: #ffffff;
    --color-on-secondary: #000000;

    background-color: var(--color-bg);
    background-image:
        radial-gradient(
            ellipse 70% 60% at 0% 0%,
            color-mix(in oklab, var(--color-primary), transparent 75%),
            transparent 60%
        ),
        radial-gradient(
            ellipse 60% 50% at 100% 100%,
            color-mix(in oklab, var(--color-secondary), transparent 80%),
            transparent 60%
        ),
        linear-gradient(
            135deg,
            var(--color-bg),
            color-mix(in oklab, var(--color-bg), var(--color-fg) 8%)
        );
    color: var(--color-fg);
}
            .theme-yellow {
        --color-bg: #ffcd00;
    --color-fg: #000000;
    --color-primary: #000000;
    --color-on-primary: #ffffff;
    --color-secondary: #0b60ae;
    --color-on-secondary: #ffffff;

    background-color: var(--color-bg);
    background-image:
        radial-gradient(
            ellipse 70% 60% at 0% 0%,
            color-mix(in oklab, var(--color-primary), transparent 75%),
            transparent 60%
        ),
        radial-gradient(
            ellipse 60% 50% at 100% 100%,
            color-mix(in oklab, var(--color-secondary), transparent 80%),
            transparent 60%
        ),
        linear-gradient(
            135deg,
            var(--color-bg),
            color-mix(in oklab, var(--color-bg), var(--color-fg) 8%)
        );
    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;
}