const colors = {
    black: '#181818',
    white: '#D5D5D5',
    'grey-100': '#747474',
    green: '#87FF5B',
    blue: '#5B92FF',
    purple: '#94079E',
    red: '#D40202',
}

const themes = {
    dark: {
        bg: colors.black,
        fg: colors.white,
        accent: colors.green,
        link: colors.blue,
    },
    light: {
        bg: colors.white,
        fg: colors.black,
        accent: colors.purple,
        link: colors.blue,
    },
}

const breakpoints = {
    mobile: 800,
}

const viewports = {
    mobile: {
        width: 440,
        height: 956,
    },
    desktop: {
        width: 1728,
        height: 1117,
    },
}

export { colors, themes, breakpoints, viewports }

export default {
    colors,
    themes,
    breakpoints,
    viewports,
}