@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&family=Figtree:ital,wght@0,300..900;1,300..900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Oswald:wght@200..700&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Raleway:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;


:root {
    --site-primary: 220 13% 18%;
    /* slate-900 */
    --site-secondary: 199 89% 48%;
    /* sky-500 */
    --btn-primary: 217 91% 60%;
    /* blue-600 */
    --btn-accent: 24 95% 53%;
    /* orange-600 */
    --btn-danger: 0 84% 60%;
    /* red-500 */
    --app-font: Inter, ui-sans-serif, system-ui;
}

@layer base {
    body {
        font-family: var(--app-font);
    }

    a {
        @apply text-siteSecondary;
    }
}

@layer components {
    .btn {
        @apply inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium px-3 py-2 border border-transparent focus:outline-none focus:ring-2 focus:ring-offset-2 transition;
    }

    .btn-primary {
        @apply bg-btnPrimary text-white hover:bg-btnPrimary/90 focus:ring-btnPrimary;
    }

    .btn-accent {
        @apply bg-btnAccent text-white hover:bg-btnAccent/90 focus:ring-btnAccent;
    }

    .btn-danger {
        @apply bg-btnDanger text-white hover:bg-btnDanger/90 focus:ring-btnDanger;
    }

    .btn-outline {
        @apply bg-transparent border-gray-300 text-gray-800 hover:bg-gray-50;
    }
}

body {
    font-family: "DejaVu Sans", Arial, sans-serif;
}