:root
{
    --font-family-sans-serif: var(--fox-font);
    --kendo-font-family-sans-serif: var(--fox-font);
    --kendo-font-family: var(--fox-font);
    --kendo-color-primary-subtle: var(--fox-nav-bg);
    --kendo-color-primary-subtle-hover: var(--fox-nav-hover);
    --kendo-color-primary-subtle-active: var(--fox-nav-hover);
    --kendo-color-primary: var(--fox-nav-bg);
    --kendo-color-primary-hover: var(--fox-nav-hover);
    --kendo-color-primary-active: var(--fox-nav-hover);
    --kendo-color-primary-emphasis: var(--fox-nav-bg-alpha);
    --kendo-color-primary-on-surface: var(--fox-nav-bg);
    --kendo-color-on-primary: var(--fox-bg);
    --kendo-color-on-app-surface: var(--fox-fg);
    --kendo-color-secondary-subtle: var(--fox-nav-bg);
    --kendo-color-secondary-subtle-hover: var(--fox-nav-hover);
    --kendo-color-secondary-subtle-active: var(--fox-nav-hover);
    --kendo-color-secondary: var(--fox-nav-bg);
    --kendo-color-secondary-hover: var(--fox-nav-hover);
    --kendo-color-secondary-active: var(--fox-nav-hover);
    --kendo-color-secondary-emphasis: var(--fox-nav-bg-alpha);
    --kendo-color-secondary-on-surface: var(--fox-nav-bg);
    --kendo-color-on-secondary: var(--fox-bg);

    --kendo-color-base: var(--fox-nav-bg);
    --kendo-color-base-active: var(--fox-nav-bg);
    --kendo-color-base-hover: var(--fox-nav-hover);

    --kendo-color-on-base: var(--fox-nav-bg-text);
    --kendo-color-base-on-subtle: var(--fox-nav-bg-text);
    --kendo-color-base-on-surface: var(--fox-nav-bg-text);

    --kendo-color-border: var(--fox-nav-bg-border);
    --kendo-color-border-alt: var(--fox-nav-bg-border2);


    --kendo-color-surface: #f8f9fa;
    --kendo-color-surface-alt: #ffffff;
}

@media (prefers-color-scheme: dark)
{
    :root
    {
        --kendo-color-surface: #070605;
        --kendo-color-surface-alt: #000000;

        --kendo-color-border: rgba(196,102,54,0.5);
        --kendo-color-border-alt: rgba(196,102,54,0.8);
    }
}