@import "tailwindcss";
@import "tw-shimmer";

@import "@fontsource-variable/hanken-grotesk";
@import "@fontsource/amiri";
@import "@fontsource/maple-mono";
@import "@fontsource/maple-mono/400-italic.css";

@theme {
    --font-sans: "Hanken Grotesk Variable", sans-serif;
    --font-serif: "Amiri", serif;
    --font-mono: "Maple Mono", monospace;

    --color-crust: oklch(0.1286 0.0247 304);
    --color-mantle: oklch(0.1776 0.0246 304);
    --color-base: oklch(0.209 0.0247 304);

    --color-surface0: oklch(0.2523 0.0247 304);
    --color-surface1: oklch(0.381 0.0246 304);

    --color-overlay0: oklch(0.518 0.0246 304);
    --color-overlay1: oklch(0.681 0.0246 304);

    --color-text: oklch(0.9911 0.0246 304);
    --color-subtext1: oklch(0.9521 0.0246 304);
    --color-subtext: oklch(0.812 0.0246 304);

    --color-accent: oklch(0.73 0.1597 304);
    --color-accent-alt: oklch(0.8412 0.1327 321.54);
    --color-positive: oklch(0.7789 0.2059 148.52);
    --color-negative: oklch(0.7285 0.1482 5.88);
}

body {
    @apply m-0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@layer base {
    ::selection {
        @apply bg-accent/40 text-text;
    }
}