:root {

    --color-primary: theme('colors.gray.900');
    --color-secondary: theme('colors.gray.700');

    --font-primary: 'Roboto', 'sans-serif';
    --font-primary-condensed: 'Roboto Condensed', 'sans-serif';
    --font-secondary: var(--font-primary);
    --font-secondary-condensed: var(--font-secondary);
    --font-mono: 'Roboto Mono', 'mono';

    --color-base-50: var(--color-neutral-50);
    --color-base-100: var(--color-neutral-100);
    --color-base-200: var(--color-neutral-200);
    --color-base-300: var(--color-neutral-300);
    --color-base-400: var(--color-neutral-400);
    --color-base-500: var(--color-neutral-500);
    --color-base-600: var(--color-neutral-600);
    --color-base-700: var(--color-neutral-700);
    --color-base-800: var(--color-neutral-800);
    --color-base-900: var(--color-neutral-900);
    --color-base-950: var(--color-neutral-950);

    --container-8xl: 88rem;

    --color-bg-1: var(--color-base-50);
    --color-bg-2: var(--color-white);

}

.theme-dmhf {

    --color-primary-1: #E30613;
    --color-primary-1-text: var(--color-neutral-100);

    --color-base-50: var(--color-neutral-50);
    --color-base-100: var(--color-neutral-100);
    --color-base-200: var(--color-neutral-200);
    --color-base-300: var(--color-neutral-300);
    --color-base-400: var(--color-neutral-400);
    --color-base-500: var(--color-neutral-500);
    --color-base-600: var(--color-neutral-600);
    --color-base-700: var(--color-neutral-700);
    --color-base-800: var(--color-neutral-800);
    --color-base-900: var(--color-neutral-900);
    --color-base-950: var(--color-neutral-950);

    --color-bg-1: var(--color-base-50);
    --color-bg-2: var(--color-white);
}

.theme-btbb {

    --color-primary-1: #E96B47;
    --color-primary-1-text: #121212;

    --color-primary-2:#008EC7;
    --color-primary-2-text: #121212;

    --color-foreground: #EDEDED;
    --color-background: #121212;

    --font-primary: 'Rubik', 'Roboto', 'sans-serif';
    --font-secondary: 'bianzhidai', 'Roboto', 'sans-serif';

    --color-bg-1: var(--color-foreground);
    --color-bg-2: var(--color-white);

}

    .theme-btbb-antwerp {

        --color-primary-1: #00ff00;
        --color-primary-1-text: #121212;

        --color-primary-2: #de3381;
        --color-primary-2-text: #121212;

    }

.theme-todm {

    --color-primary-1: #E30613;
    --color-primary-1-text: var(--color-slate-100);

    --color-foreground: var(--color-slate-100);
    --color-background: var(--color-slate-900);

    --font-primary: var(--font-primary);
    --font-secondary: 'lulo-clean-one-bold', 'Roboto', 'sans-serif';

    --color-base-50: var(--color-slate-50);
    --color-base-100: var(--color-slate-100);
    --color-base-200: var(--color-slate-200);
    --color-base-300: var(--color-slate-300);
    --color-base-400: var(--color-slate-400);
    --color-base-500: var(--color-slate-500);
    --color-base-600: var(--color-slate-600);
    --color-base-700: var(--color-slate-700);
    --color-base-800: var(--color-slate-800);
    --color-base-900: var(--color-slate-900);
    --color-base-950: var(--color-slate-950);

    --color-bg-1: var(--color-base-50);
    --color-bg-2: var(--color-white);

}

    .theme-todm .font-secondary {
        letter-spacing: var(--tracking-tightest);
        font-weight: normal !important;
    }


.theme-twst {

    --font-primary: var(--font-primary);
    --font-secondary: 'kobe-bold', 'Roboto', 'sans-serif';

    --color-bg-1: var(--color-blue-100);

}

.theme-upp {

    --color-primary-1: #FFFF00;
    --color-primary-1-text: var(--color-neutral-100);

    --font-primary: 'tosh-a', 'Roboto', 'sans-serif';
    --font-secondary: 'tosh-a', 'Roboto', 'sans-serif';

    --color-bg-1: var(--color-white);
    --color-bg-2: var(--color-white);

    --color-button-1: #0083ca;
    --color-button-text-1: var(--color-white);

}

.theme-tig {

    --color-primary-1: #E30613;
    --color-primary-1-text: var(--color-slate-100);

}