@import "tailwindcss";
@plugin "flowbite-react/plugin/tailwindcss";

@theme {
    /* Fonts */
    --font-heading: "Newsreader", serif;
    --font-body: "IBM Plex Sans", sans-serif;
    --font-data: "IBM Plex Mono", monospace;

    /* Colours */
    --color-background: #F7F4EE;
    --color-sidebar: #F2EEE6;
    --color-card: #FDFBF7;

    /* Colour Fonts */
    --color-text-primary: #2B2620;
    --color-text-strong: #35302A;
    --color-faint-mono: #A79C8E;
    --color-muted: #9A9084;
    --color-hover: #E7E0D2;
    --color-hairline: #F0EBE2;
}

:root {
    font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    line-height: 1.5;
    font-weight: 400;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background-color: var(--color-background);
}