@import url("https://fonts.googleapis.com/css2?family=Fuzzy+Bubbles:wght@400;700&family=Knewave&family=Lugrasimo&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap");

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

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;

    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;

    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;

    --primary: 263 98% 61%;
    --primary-foreground: 210 40% 98%;

    --secondary: 0 0% 96%;
    --secondary-foreground: 222.2 47.4% 11.2%;

    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --muted-foreground-subtle: 215.4 16.3% 85%;

    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;

    --destructive: 0 91% 71%;
    --destructive-foreground: 0 84% 60%;

    --border: 225 3% 71%;
    --input: 214.3 31.8% 91.4%;
    --ring: 263 98% 61%;

    --radius: 0.5rem;

    --current-period-stroke: 242 67% 67%;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;

    --card: 221 39% 11%;
    --card-foreground: 210 40% 98%;

    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;

    --primary: 263 98% 61%;
    --primary-foreground: 210 40% 98%;

    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;

    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --muted-foreground-subtle: 215 20.2% 20%;

    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;

    --destructive: 0 88% 70%;
    --destructive-foreground: 0 84% 60%;

    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 263 98% 61%;

    --current-period-stroke: 242 67% 67%;

    color-scheme: dark;
  }
}

body {
  overflow: hidden;
  position: relative;
  font-family: "Noto Sans";
  background: #fafaf8;
}

.toolbar-shadow {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 4px 10px 0 rgba(0, 0, 0, 0.12);
}

.dropdown-shadow {
  box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.12);
}

.color-picker {
  background: radial-gradient(
    circle,
    rgba(63, 94, 251, 1) 0%,
    rgba(252, 70, 107, 1) 100%
  );
}

.log-container::-webkit-scrollbar {
  display: none;
}