@import "tailwindcss";

@theme {
    --color-bg-light: white;
    --color-bg-dark: hsl(240, 21%, 12%);

    --color-text-light: #333333;
    --color-title-light: hsl(248, 62%, 25%);
    --color-text-dark: hsl(210deg 10% 90%);
    --color-title-dark: hsl(210deg 10% 90%);
    
    --color-surface-light: hsl(228deg 30% 95%);
    --color-surface-2-light: hsl(228deg 30% 90%);
    --color-surface-dark: #313244;
    --color-surface-2-dark: #45475a;
    
    --color-blue-light: #1e66f5;
    --color-blue-dark: #89b4fa;
    --color-lavendar-dark: #b4befe;
    --color-red-dark: #f38ba8;

    --color-bar-dark: hsl(353, 71%, 55%);
    --color-bar-light: hsl(353, 62%, 40%);
    --color-line-dark: hsl(200, 71%, 75%);
    --color-line-light: hsl(200, 62%, 65%);

    --color-grid-lines-dark: #313244;
    --color-grid-lines-light: hsl(237, 16%, 90%);
}