@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
@import "tailwindcss/tailwind.css";

*,
*::after,
*::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  caret-color: var(--gray-50);
}

html {
  color-scheme: dark light;
  font-family: "Inter", sans-serif;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}

body {
  width: 100vw;
  height: 100vh;
}

:root {
  --gray-60: #000000;
  --gray-50: #222222;
  --gray-45: #303030;
  --gray-40: #909090;
  --gray-30: #b5b5b5;
  --gray-20: #e3e3e3;
  --gray-10: #f5f5f5;
  --gray-0: #ffffff;
  --success: #30a465;
  --success-light: #c7e3d3;
  --warning: #fcbe07;
  --error: #da1e28;
  --border: #d5dce9;
  --blue: #5981e3;
  --blue-10: #1773b0;
  --blue-20: #ebf0ff;
}

*::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}

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

*::-webkit-scrollbar-thumb {
  background-color: var(--gray-30);
  border-radius: 10px;
}

.transparent-scrollbar::-webkit-scrollbar {
  width: 0px;
  height: 7px;
}

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;

    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;

    --primary: 240 5.9% 10%;
    --primary-foreground: 0 0% 98%;

    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;

    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;

    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;

    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 240 10% 3.9%;

    --radius: 0.5rem;
  }

  .dark {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;

    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;

    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;

    --primary: 0 0% 98%;
    --primary-foreground: 240 5.9% 10%;

    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;

    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;

    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;

    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 240 4.9% 83.9%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}