/** biome-ignore-all lint/suspicious/noUnknownAtRules: Tailwind */
@import "tailwindcss";
@import "tw-animate-css";
@import "@fontsource/work-sans";

:root {
  --background: hsl(220 23% 95%);
  --secondary-background: oklch(100% 0 0);
  --foreground: oklch(0% 0 0);
  --main-foreground: oklch(0% 0 0);
  --main: hsl(220 23% 95%);
  --border: oklch(0% 0 0);
  --ring: oklch(0% 0 0);
  --overlay: oklch(0% 0 0 / 0.8);
  --shadow: 4px 4px 0px 0px var(--border);
  --chart-1: #FF7A05;
  --chart-2: #0099FF;
  --chart-3: #FFBF00;
  --chart-4: #00D696;
  --chart-5: #7A83FF;
  --chart-active-dot: #000;
}

@theme inline {
  --color-main: var(--main);
  --color-background: var(--background);
  --color-secondary-background: var(--secondary-background);
  --color-foreground: var(--foreground);
  --color-main-foreground: var(--main-foreground);
  --color-border: var(--border);
  --color-overlay: var(--overlay);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);

  --spacing-boxShadowX: 4px;
  --spacing-boxShadowY: 4px;
  --spacing-reverseBoxShadowX: -4px;
  --spacing-reverseBoxShadowY: -4px;
  --radius-base: 5px;
  --shadow-shadow: var(--shadow);
  --font-weight-base: 500;
  --font-weight-heading: 700;
}

@layer base {
  body {
    @apply text-foreground font-base bg-background;
    font-family: "Work Sans", sans-serif;
  }

  h1, h2, h3, h4, h5, h6{
    @apply font-heading;
  }
}