@import "tailwindcss";
@import "tw-animate-css";

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

:root {
  --background: oklch(92.13% 0.0388 282.36);
  --secondary-background: oklch(100% 0 0);
  --foreground: oklch(0% 0 0);
  --main-foreground: oklch(0% 0 0);
  --main: oklch(66.34% 0.1806 277.2);
  --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: #7A83FF;
  --chart-2: #FACC00;
  --chart-3: #FF4D50;
  --chart-4: #00D696;
  --chart-5: #0099FF;
  --chart-active-dot: #000;
}

.dark {

  --background: oklch(26.58% 0.0737 283.96);
  --secondary-background: oklch(23.93% 0 0);
  --foreground: oklch(92.49% 0 0);
  --main-foreground: oklch(0% 0 0);
  --main: oklch(66.34% 0.1806 277.2);
  --border: oklch(0% 0 0);
  --ring: oklch(100% 0 0);
  --shadow: 4px 4px 0px 0px var(--border);
  --chart-1: #7A83FF;
  --chart-2: #E0B700;
  --chart-3: #FF6669;
  --chart-4: #00BD84;
  --chart-5: #008AE5;
  --chart-active-dot: #fff;
}


@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: 10px;
  --shadow-shadow: var(--shadow);
  --font-weight-base: 500;
  --font-weight-heading: 700;
}

body,
.scrollbar {
  --sb-track-color: #ffffff;
  --sb-thumb-color: #000000;
}

html.dark body,
html.dark .scrollbar {
  --sb-track-color: #1f1f1f;
  --sb-thumb-color: #e6e6e6;
}

.scrollbar::-webkit-scrollbar {
  width: 16px;
}

body::-webkit-scrollbar {
  width: 20px;
}

.toc-scrollbar::-webkit-scrollbar {
  width: 0px;
}

body::-webkit-scrollbar-track,
.scrollbar::-webkit-scrollbar-track {
  background: var(--sb-track-color);
}

body::-webkit-scrollbar-track {
  border-left: 4px solid #000;
}

body::-webkit-scrollbar-thumb,
.scrollbar::-webkit-scrollbar-thumb {
  background: var(--sb-thumb-color);
}

html.dark body::-webkit-scrollbar-thumb {
  border-left: 4px solid #000;
}

.code::-webkit-scrollbar-track {
  background: transparent;
}

.code::-webkit-scrollbar-thumb {
  background: white;
}

.code::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  border: 0 !important;
}

.code::-webkit-scrollbar-corner {
  background: transparent !important;
  border: 0 !important;
}

.command-scrollbar::-webkit-scrollbar {
  width: 10px;
}

.command-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.command-scrollbar::-webkit-scrollbar-thumb {
  background: #000;
}

@supports not selector(::-webkit-scrollbar) {
  body,
  .scrollbar {
    scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
  }

  .command-scrollbar {
    scrollbar-color: #000 transparent;
  }
}