import {css} from "styled-components";
import type { RuleSet } from 'styled-components';

export const theme = {
    colors: {
        darkGreen: '#0C3B2E',
        green: '#5EA12D',
        greenHover: '#72B541',
        lightGreen: '#E6F696',
        paleGreen: '#F1FAF0',
        gray: '#A3ADA2',
        border: '#ebebeb',
        white: '#ffffff',
        pageBg: '#FF7D89',
    },
    radius: {
        page: '20px',
        card: '16px',
        button: '12px',
        small: '8px',
    },
    breakpoints: {
        xs: '576px'
    },
    media: {
        mobile: (inner: RuleSet) => css`
          @media (max-width: 576px) {
            ${inner};
          }
        `,
        tablet: (inner: RuleSet) => css`
          @media (max-width: 900px) or (max-height: 600px) {
            ${inner};
          }
        `
    } as const
};