export const theme = {
    colors: {
        primary: 'rgb(61, 72, 90)',
        secondary: 'rgba(61, 72, 90, 0.8)',
        accent: '#ffc95e',
        // accent: '#2db34a',

        white: 'white',
        background: 'white',

        primaryDark: 'rgba(255, 255, 255, 0.5)'
    },
    fontFamilies: {
        regular: '"Poppins", sans-serif',
        headings: '"Merienda", cursive',
    },

    fontSizes: {
        small: '.8rem',
        base: '1rem',
        medium: '1.1rem',
        large: '1.2rem',
        xLarge: '1.3rem',
        xxLarge: '1.4px',
    },

    media: {
        xsmall: `(min-width: 22em)`,
        small: `(min-width: 48em)`,
        medium: `(min-width: 64em)`,
        large: `(min-width: 85.375em)`,
        xlarge: `(min-width: 120em)`,
        xxlarge: `(min-width: 160em)`,
    },

    transitions: {
        default: '0.2s ease-in-out',
    },
}