@import "tailwindcss";
@import "./_base.css" layer(base);
@import "./_components.css" layer(components);

@plugin "@tailwindcss/forms";

@source inline("rotate-90");

@theme {
    --font-sans: Lato, sans-serif;
    --font-weight-semibold: 700;
    --font-weight-bold: 900;
    --color-primary: #3d8ccb;
    --color-secondary: #f9c700;
}

/*
 * Tailwind 3 defaults that Tailwind 4 changed: borders were gray-200 instead of currentColor,
 * and buttons had a pointer cursor.
 */
@layer base {
    *,
    ::after,
    ::before,
    ::backdrop,
    ::file-selector-button {
        border-color: var(--color-gray-200, currentcolor);
    }

    button:not(:disabled),
    [role="button"]:not(:disabled) {
        cursor: pointer;
    }
}

/*
 * Thin scrollbars without a track for inner scrolling areas. The page scrollbar takes its
 * style from <html>, which body * leaves out. Firefox and Chrome/Edge 121+ honour these;
 * Safari keeps its own overlay scrollbars.
 */
@layer base {
    body * {
        scrollbar-width: thin;
        scrollbar-color: var(--color-gray-300) transparent;
    }
}