@tailwind base;
@tailwind components;
@tailwind utilities;

@import url("../styles/theme.css");
@import url("https://api.fontshare.com/v2/css?f[]=satoshi@300,301,400,401,500,501,700,701,900,901&display=swap");

:root {
  --background: #ffffff;
  --foreground: #171717;
}

@media (prefers-color-scheme: light) {
  :root {
    --background: #ffffff;
    --foreground: #171717;
  }
}

body {
  color: var(--foreground);
  background: var(--background);
  font-family: "Satoshi", sans-serif;
  overflow-x: hidden;
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

@layer base {
  :root {
    --background: 0 0% 98.8235%;
    --foreground: 0 0% 10.1961%;
    --card: 0 0% 98.8235%;
    --card-foreground: 0 0% 14.902%;
    --popover: 0 0% 98.8235%;
    --popover-foreground: 216.7347 96.0784% 10%;
    --primary: 219.2405 100% 53.5294%;
    --primary-foreground: 0 0% 100%;
    --secondary: 0 0% 94.902%;
    --secondary-foreground: 0 0% 0%;
    --muted: 0 0% 94.902%;
    --muted-foreground: 0 0% 40%;
    --accent: 0 0% 92.1569%;
    --accent-foreground: 0 0% 14.902%;
    --destructive: 0 49.8039% 50%;
    --destructive-foreground: 0 0% 98.8235%;
    --border: 0 0% 87.8431%;
    --input: 0 0% 85.8824%;
    --ring: 216.9697 97.0588% 60%;
    --chart-1: 350 96.7742% 87.8431%;
    --chart-2: 197.4468 100% 72.3529%;
    --chart-3: 60 100% 52.7451%;
    --chart-4: 329.4231 100% 79.6078%;
    --chart-5: 119.4146 84.3621% 52.3529%;
    --sidebar: 0 0% 97.2549%;
    --sidebar-foreground: 0 0% 20%;
    --sidebar-primary: 350 96.7742% 87.8431%;
    --sidebar-primary-foreground: 0 0% 0%;
    --sidebar-accent: 60 100% 52.7451%;
    --sidebar-accent-foreground: 0 0% 0%;
    --sidebar-border: 0 0% 83.1373%;
    --sidebar-ring: 350 96.7742% 87.8431%;
    --font-sans: Poppins, sans-serif;
    --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
    --font-mono: Roboto Mono, monospace;
    --radius: 0.8rem;
    --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
    --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
    --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1),
      0 1px 2px -1px hsl(0 0% 0% / 0.1);
    --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1),
      0 1px 2px -1px hsl(0 0% 0% / 0.1);
    --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1),
      0 2px 4px -1px hsl(0 0% 0% / 0.1);
    --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1),
      0 4px 6px -1px hsl(0 0% 0% / 0.1);
    --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1),
      0 8px 10px -1px hsl(0 0% 0% / 0.1);
    --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
    --tracking-normal: 0em;
    --spacing: 0.25rem;
  }

  /* .dark {
    --background: 0 0% 3.9%;
    --foreground: 0 0% 98%;
    --card: 0 0% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 0 0% 9%;
    --secondary: 0 0% 14.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 14.9%;
    --muted-foreground: 0 0% 63.9%;
    --accent: 0 0% 14.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 14.9%;
    --input: 0 0% 14.9%;
    --ring: 0 0% 83.1%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
  } */
  .dark {
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
}

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

.scrollbar-hidden::-webkit-scrollbar {
  display: none;
}
