@tailwind base;
@tailwind components;
@tailwind utilities;
/*
Light Mode: https://www.realtimecolors.com/dashboard?colors=161618-f0f0f0-FFE500-dbddff-6120cf&fonts=Poppins-Poppins 
Dark Mode:  https://www.realtimecolors.com/dashboard?colors=e7e7e9-0f0f0f-5819c5-000568-ffe500&fonts=Poppins-Poppins
*/
@layer base {
    :root {
        --color-bkg: 0deg, 0%, 94%;
        --color-content: 240deg, 4%, 9%;
        --color-primary: 54deg, 100%, 50%;
        --color-secondary: 237deg, 100%, 93%;
        --color-accent: 262deg, 73%, 47%;
    }

    @media (prefers-color-scheme: dark) {
        :root {
            --color-bkg: 0deg, 0%, 6%;
            --color-content: 240deg, 4%, 91%;
            --color-primary: 262deg, 77%, 44%;
            --color-secondary: 237deg, 100%, 20%;
            --color-accent: 54deg, 100%, 50%;
        }
    }

    :root[data-theme="dark"] {
        --color-bkg: 0deg, 0%, 6%;
        --color-content: 240deg, 4%, 91%;
        --color-primary: 262deg, 77%, 44%;
        --color-secondary: 237deg, 100%, 20%;
        --color-accent: 54deg, 100%, 50%;
    }

    :root[data-theme="light"] {
        --color-bkg: 0deg, 0%, 94%;
        --color-content: 240deg, 4%, 9%;
        --color-primary: 54deg, 100%, 50%;
        --color-secondary: 237deg, 100%, 20%;
        --color-accent: 262deg, 73%, 47%;
    }
}