@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    :root {
        --light: 223.81 0% 98%;
        --dark: 239.95 9% 6%;
        --bg: 0 0% 100%;
        --fg: 239.93 9% 4%;
        --primary: 216.77 100% 50%;
        --primary-fg: 0 0% 100%;
        --secondary: 240 5.88% 90%;
        --secondary-fg: 240.01 6% 10%;
        --tertiary: 0 0% 100%;
        --tertiary-fg: 240 4% 16%;
        --overlay: 0 0% 100%;
        --overlay-fg: 239.93 9% 4%;
        --muted: 240 5.88% 90%;
        --muted-fg: 240 4% 41%;
        --accent: 216.77 100% 50%;
        --accent-fg: 0 0% 100%;
        --accent-subtle: 216.92 99% 97%;
        --accent-subtle-fg: 216.74 100% 40%;
        --success: 161.17 91% 31%;
        --success-fg: 151.77 82% 96%;
        --info: 205.77 100% 50%;
        --info-fg: 0 0% 100%;
        --danger: 0.01 72% 51%;
        --danger-fg: 360 86% 97%;
        --warning: 43.2 96% 56.99%;
        --warning-fg: 20.91 91% 14.1%;
        --border: 240 6% 90%;
        --input: 240 6% 90%;
        --ring: var(--primary);
        --toggle: 240.01 5% 84%;
        --radius: 0.5rem;
        --primary-chart: 216.74 100% 45%;
        --secondary-chart: 219.83 100% 77%;
        --tertiary-chart: 216.01 92% 60%;
        --highlight-chart: 210 98% 78%;
        --accent-chart: 210 98% 78%
    }

    .dark {
        --bg: 0 0% 0%;
        --fg: 223.81 0% 98%;
        --primary: 216.04 98% 52%;
        --primary-fg: 0 0% 100%;
        --secondary: 239.99 6% 11%;
        --secondary-fg: 223.81 0% 98%;
        --tertiary: 240.02 10% 6%;
        --tertiary-fg: 239.99 4% 96%;
        --accent: 216.04 98% 52%;
        --accent-fg: 0 0% 100%;
        --accent-subtle: 215.99 94% 6%;
        --accent-subtle-fg: 204.92 100% 77%;
        --overlay: 240.03 6% 6%;
        --overlay-fg: 223.81 0% 98%;
        --muted: 239.95 3% 16%;
        --muted-fg: 240 5.03% 64.9%;
        --info: 205.77 100% 50%;
        --info-fg: 0 0% 100%;
        --success: 161.17 91% 31%;
        --success-fg: 151.77 82% 96%;
        --ring: var(--primary);
        --toggle: 239.99 5% 26%;
        --border: 240.01 7.1% 15%;
        --input: 239.95 3% 16%;
        --primary-chart: 221.19 83% 53%;
        --secondary-chart: 211.99 95% 68%;
        --tertiary-chart: 216.01 92% 60%;
        --highlight-chart: 210 98% 78%;
        --accent-chart: 212 96% 87%
    }
}

@layer base {
    html {
        @apply scroll-smooth;
    }

    * {
        @apply border-border;
        font-feature-settings: 'cv11', 'ss01';
        font-variation-settings: 'opsz' 850;
        text-rendering: optimizeLegibility;
        scrollbar-width: thin;
    }

    body {
        @apply bg-bg text-fg;
    }

    /* dark mode */
    .dark {
        scrollbar-width: thin;

        @media (prefers-color-scheme: dark) {
            * {
                scrollbar-width: thin;
            }
        }
    }

    /* Chrome, Edge, and Safari */
    *::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    *::-webkit-scrollbar-track {
        background: transparent;
        border-radius: 5px;
    }

    *::-webkit-scrollbar-thumb {
        @apply bg-muted;
        border-radius: 14px;
        border: 3px solid transparent;
    }
}