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

@plugin "@tailwindcss/typography";

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

:root {
  --border-radius: 5px;
  --box-shadow-x: 4px;
  --box-shadow-y: 4px;
  --reverse-box-shadow-x: -4px;
  --reverse-box-shadow-y: -4px;

  --heading-font-weight: 700;
  --base-font-weight: 500;

  --background: oklch(93.46% 0.0304 254.32);
  --secondary-background: oklch(100% 0 0);
  --foreground: oklch(0% 0 0);
  --main-foreground: oklch(0% 0 0);

  --main: oklch(67.47% 0.1725 259.61);
  --border: oklch(0% 0 0);
  --ring: oklch(0% 0 0);
  --overlay: oklch(0% 0 0 / 0.8);

  --shadow: var(--box-shadow-x) var(--box-shadow-y) 0px 0px var(--border);

  --chart-1: oklch(67.47% 0.1726 259.49);
  --chart-2: oklch(67.28% 0.2147 24.22);
  --chart-3: oklch(86.03% 0.176 92.36);
  --chart-4: oklch(79.76% 0.2044 153.08);
  --chart-5: oklch(66.34% 0.1806 277.2);
  --chart-active-dot: #000;
}

.dark {
  --background: oklch(29.12% 0.0633 270.86);
  --secondary-background: oklch(23.93% 0 0);
  --foreground: oklch(92.49% 0 0);
  --main-foreground: oklch(0% 0 0);

  --border: oklch(0% 0 0);
  --ring: oklch(100% 0 0);

  --shadow: var(--box-shadow-x) var(--box-shadow-y) 0px 0px var(--border);

  --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: var(--box-shadow-x);
  --spacing-boxShadowY: var(--box-shadow-y);
  --spacing-reverseBoxShadowX: var(--reverse-box-shadow-x);
  --spacing-reverseBoxShadowY: var(--reverse-box-shadow-y);

  --radius-base: var(--border-radius);

  --shadow-shadow: var(--shadow);
  --shadow-nav: 4px 4px 0px 0px var(--border);
  --shadow-darkNav: 4px 4px 0px 0px var(--dark-border);

  --font-weight-base: var(--base-font-weight);
  --font-weight-heading: var(--heading-font-weight);

  --animate-marquee: marquee 5s linear infinite;
  --animate-marquee2: marquee2 5s linear infinite;

  --spacing-container: 1300px;

  @keyframes marquee {
    0% {
      transform: translateX(0%);
    }
    100% {
      transform: translateX(-100%);
    }
  }

  @keyframes marquee2 {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(0%);
    }
  }
}

@layer base {
  body {
    @apply text-foreground font-base;
  }

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

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;
  }
}
