:root {
    --color-primary: var(--gf-light--brand-red);
    --color-primary-contrast: #ffffff;
    --color-primary-hover: var(--gf-light--brand-red-hover);
    --color-primary-active: var(--gf-light--brand-red-active);
    --color-primary-light: var(--gf-light--brand-red-soft);
    --color-primary-light-2: var(--gf-light--brand-red-soft);
    --color-primary-dark: var(--gf-light--brand-red-hover);
    --color-accent: var(--color-primary);

    --color-body: var(--gf-light--bg);
    --color-box-body: var(--gf-light--bg);
    --color-box-body-highlight: var(--gf-light--bg-soft);
    --color-box-header: var(--gf-light--bg-soft);
    --color-menu: var(--gf-light--bg);
    --color-card: var(--gf-light--bg);
    --color-secondary: var(--gf-light--border);
    --color-secondary-bg: var(--gf-light--bg-soft);
    --color-secondary-dark-1: var(--gf-light--border-strong);

    --color-text: var(--gf-light--text);
    --color-text-light: var(--gf-light--text-soft);
    --color-text-light-2: var(--gf-light--text-faint);
    --color-text-light-3: var(--gf-light--text-fainter);

    --color-border: var(--gf-light--border);
    --color-light-border: var(--gf-light--border-soft);
    --color-input-background: var(--gf-light--bg);
    --color-input-border: var(--gf-light--border-strong);
    --color-input-text: var(--gf-light--text);

    --gf-menu-bg: var(--gf-light--menu-bg);
    --gf-menu-hover-bg: var(--gf-light--menu-hover);
    --gf-button-primary-bg: var(--gf-light--button-primary);
    --gf-button-primary-bg-hover: var(--gf-light--button-primary-hover);
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-primary: var(--gf-dark--brand-red);
        --color-primary-hover: var(--gf-dark--brand-red-hover);
        --color-primary-active: var(--gf-dark--brand-red-active);
        --color-primary-light: var(--gf-dark--brand-red-soft);
        --color-primary-light-2: var(--gf-dark--brand-red-soft);
        --color-primary-dark: var(--gf-dark--brand-red-hover);

        --color-body: var(--gf-dark--bg);
        --color-box-body: var(--gf-dark--bg-soft);
        --color-box-body-highlight: var(--gf-dark--bg-soft);
        --color-box-header: var(--gf-dark--bg-soft);
        --color-menu: var(--gf-dark--bg-soft);
        --color-card: var(--gf-dark--bg-soft);
        --color-secondary: var(--gf-dark--border);
        --color-secondary-bg: var(--gf-dark--border-soft);
        --color-secondary-dark-1: var(--gf-dark--border-strong);

        --color-text: var(--gf-dark--text);
        --color-text-light: var(--gf-dark--text-soft);
        --color-text-light-2: var(--gf-dark--text-faint);
        --color-text-light-3: var(--gf-dark--text-fainter);

        --color-border: var(--gf-dark--border);
        --color-light-border: var(--gf-dark--border-soft);
        --color-input-background: var(--gf-dark--bg);
        --color-input-border: var(--gf-dark--border);
        --color-input-text: var(--gf-dark--text);

        --gf-menu-bg: var(--gf-dark--menu-bg);
        --gf-menu-hover-bg: var(--gf-dark--menu-hover);
        --gf-button-primary-bg: var(--gf-dark--button-primary);
        --gf-button-primary-bg-hover: var(--gf-dark--button-primary-hover);
    }
}