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

@layer base {
    :root {
        --background: 0 0% 100%;
        --fg: 240 10% 3.9%;

        --card: 0 0% 100%;
        --card-header: 240 5% 99%;

        --popover: 0 0% 100%;
        --popover-fg: 240 10% 3.9%;

        --primary: 216 98% 52%;
        --primary-fg: 0 0% 100%;

        --secondary: 240 4.8% 95.9%;
        --secondary-fg: 240 5.9% 10%;

        --tertiary: 240 4.8% 95.9%;
        --tertiary-fg: 240 4% 16%;

        --success: 152 69% 31%;
        --success-fg: 0 0% 100%;

        --muted: 240 4.8% 95.9%;
        --muted-fg: 240 3.8% 46.1%;

        --danger: 347 77% 50%;
        --danger-fg: 356 100% 97%;

        --warning: 46 97% 65%;
        --warning-fg: 21 92% 14%;

        --border: 240 5.9% 90%;
        --input: 240 5.9% 90%;
        --toggle: 240 5% 84%;
        --ring: 211 100% 58%;

        --radius: 0.55rem;
    }

    .dark {
        --background: 0 0% 0%;
        --fg: 0 0% 98%;

        --card: 240 10% 3.9%;
        --card-header: 240 6% 6%;

        --popover: 240 6% 6%;
        --popover-fg: 0 0% 98%;

        --secondary: 240 3.7% 15.9%;
        --secondary-fg: 0 0% 98%;

        --tertiary: 240 10% 6%;
        --tertiary-fg: 240 5% 96%;

        --muted: 240 3.7% 15.9%;
        --muted-fg: 240 5% 64.9%;

        --border: 240 7% 15%;
        --input: 240 3.7% 15.9%;
        --toggle: 240 5% 26%;
    }
}

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

    * {
        @apply border-border;
        font-feature-settings: 'cv11', 'ss01';
        font-variation-settings: 'opsz' 850;
    }

    body {
        @apply bg-background text-fg;
        font-feature-settings:
                'rlig' 1,
                'calt' 1;
    }
}

.react-aria-Button,
.react-aria-Dialog {
    outline: none;
}

.react-aria-DropIndicator[data-drop-target] {
    outline: 1px solid hsl(var(--primary));
}