@import "@sun-typeface/suit/fonts/variable/woff2/SUIT-Variable.css";
@import "tailwindcss";

@custom-variant dark (&:is(.dark *));

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-border: var(--border);
  --color-ring: var(--ring);
  --font-sans: "SUIT Variable", "SUIT", system-ui, sans-serif;
  --radius-sm: calc(var(--radius) * 0.6);
  --radius-md: calc(var(--radius) * 0.8);
  --radius-lg: var(--radius);
}

:root {
  color-scheme: light;

  --light-background: hsl(340 40% 98%);
  --light-foreground: hsl(315 21% 8%);
  --light-muted: hsl(340 20% 95%);
  --light-muted-foreground: hsl(340 10% 60%);
  --light-border: hsl(340 25% 90%);
  --light-ring: hsl(315 21% 8%);

  --dark-background: hsl(315 21% 8%);
  --dark-foreground: hsl(0 0% 98%);
  --dark-muted: hsl(296 18% 15%);
  --dark-muted-foreground: hsl(240 5% 68%);
  --dark-border: hsl(296 18% 15%);
  --dark-ring: hsl(240 4.9% 83.9%);

  --background: var(--light-background);
  --foreground: var(--light-foreground);
  --muted: var(--light-muted);
  --muted-foreground: var(--light-muted-foreground);
  --border: var(--light-border);
  --ring: var(--light-ring);
  --radius: 0.625rem;

  --scrollbar: hsla(340 10% 60% / 0.5);
  --scrollbar-hover: hsla(340 10% 60% / 0.8);
  --mono-filter: none;
}

.dark {
  color-scheme: dark;
  --background: var(--dark-background);
  --foreground: var(--dark-foreground);
  --muted: var(--dark-muted);
  --muted-foreground: var(--dark-muted-foreground);
  --border: var(--dark-border);
  --ring: var(--dark-ring);
  --mono-filter: invert(1);
}

.light {
  color-scheme: light;
  --background: var(--light-background);
  --foreground: var(--light-foreground);
  --muted: var(--light-muted);
  --muted-foreground: var(--light-muted-foreground);
  --border: var(--light-border);
  --ring: var(--light-ring);
  --mono-filter: none;
}

@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    color-scheme: dark;
    --background: var(--dark-background);
    --foreground: var(--dark-foreground);
    --muted: var(--dark-muted);
    --muted-foreground: var(--dark-muted-foreground);
    --border: var(--dark-border);
    --ring: var(--dark-ring);
    --mono-filter: invert(1);
  }
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 64px;
}

html::-webkit-scrollbar {
  width: 19px;
  height: 11px;
}

html::-webkit-scrollbar-track {
  background: transparent;
}

html::-webkit-scrollbar-thumb {
  background: var(--scrollbar);
  border: 5px solid var(--background);
  border-radius: 16px;
}

html::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-hover);
}

html {
  scrollbar-color: var(--scrollbar) var(--background);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}