@import "tailwindcss";
@import "./buttons.css";
@import "./peak.css";
@import "./typography.css";

@theme {
    --color-primary: oklch(53.24% 0.301 290.86);

    --color-neutral: var(--color-slate-800);
    --color-neutral-50: var(--color-slate-50);
    --color-neutral-100: var(--color-slate-100);
    --color-neutral-200: var(--color-slate-200);
    --color-neutral-300: var(--color-slate-300);
    --color-neutral-400: var(--color-slate-400);
    --color-neutral-500: var(--color-slate-500);
    --color-neutral-600: var(--color-slate-600);
    --color-neutral-700: var(--color-slate-700);
    --color-neutral-800: var(--color-slate-800);
    --color-neutral-900: var(--color-slate-900);
    --color-neutral-950: var(--color-slate-950);

    /* --font-sans: Gaultier, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; */
    /* --font-serif: Lavigne, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; */
    /* --font-mono: Anonymous, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; */

    --font-weight-*: initial;
    /* --font-weight-hairline: 100; */
    /* --font-weight-thin: 200; */
    /* --font-weight-light: 300; */
    --font-weight-normal: 400;
    /* --font-weight-medium: 500; */
    /* --font-weight-semibold: 600; */
    --font-weight-bold: 700;
    /* --font-weight-extrabold: 800; */
    /* --font-weight-black: 900; */
}

@layer base {
    html {
        color: var(--color-neutral);
        /* Set sans, serif or mono stack with optional custom font as default. */
        font-family: var(--font-sans);
        /* font-family: var(--font-serif); */
        /* font-family: var(--font-mono); */
    }

   ::selection,
   ::target-text {
        background-color: var(--color-primary);
        color: var(--color-white);
   }
}