tailwind.css

@import "tailwindcss";

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 47.4% 11.2%;

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

    --popover: 0 0% 100%;
    --popover-foreground: 222.2 47.4% 11.2%;

    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;

    --card: 0 0% 100%;
    --card-foreground: 222.2 47.4% 11.2%;

    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;

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

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

    --destructive: 0 100% 50%;
    --destructive-foreground: 210 40% 98%;

    --ring: 215 20.2% 65.1%;

    --radius: 0.5rem;

  }

  .dark {
    --background: 224 71% 4%;
    --foreground: 213 31% 91%;

    --muted: 223 47% 11%;
    --muted-foreground: 215.4 16.3% 56.9%;

    --accent: 216 34% 17%;
    --accent-foreground: 210 40% 98%;

    --popover: 224 71% 4%;
    --popover-foreground: 215 20.2% 65.1%;

    --border: 216 34% 17%;
    --input: 216 34% 17%;

    --card: 224 71% 4%;
    --card-foreground: 213 31% 91%;

    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 1.2%;

    --secondary: 222.2 47.4% 11.2%;
    --secondary-foreground: 210 40% 98%;

    --destructive: 0 63% 31%;
    --destructive-foreground: 210 40% 98%;

    --ring: 216 34% 17%;

    --radius: 0.5rem;
  }
}

@theme {
  --radius: 0.5rem;
  --color-border: hsl(var(--border));
  --color-input: hsl(var(--input));
  --color-ring: hsl(var(--ring));
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));

  --color-primary: hsl(var(--primary));
  --color-primary-foreground: hsl(var(--primary-foreground));

  --color-secondary: hsl(var(--secondary));
  --color-secondary-foreground: hsl(var(--secondary-foreground));

  --color-destructive: hsl(var(--destructive));
  --color-destructive-foreground: hsl(var(--destructive-foreground));

  --color-muted: hsl(var(--muted));
  --color-muted-foreground: hsl(var(--muted-foreground));

  --color-accent: hsl(var(--accent));
  --color-accent-foreground: hsl(var(--accent-foreground));

  --color-popover: hsl(var(--popover));
  --color-popover-foreground: hsl(var(--popover-foreground));

  --color-card: hsl(var(--card));
  --color-card-foreground: hsl(var(--card-foreground));

  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);

  --font-family-poppins: var(--font-poppins);
  --font-family-inter: var(--font-inter);

  --duration-default: cubic-bezier(0.2, 0.0, 0, 1.0);
  --duration-emphasized-in: cubic-bezier(0.05, 0.7, 0.1, 1.0);
  --duration-emphasized-out: cubic-bezier(0.3, 0.0, 0.8, 0.15);

  --animate-collapse-down: collapse-down 0.2s ease-out;
  --animate-collapse-up: collapse-up 0.2s ease-out;

  --animate-fade-in: fade-in 250ms ease-out;
  --animate-fade-out: fade-out 200ms ease-out;

  --animate-drawer-in-left: slide-in-left 400ms var(--duration-emphasized-in);
  --animate-drawer-out-left: slide-out-left 200ms var(--duration-emphasized-out);
  --animate-drawer-in-right: slide-in-right 400ms var(--duration-emphasized-in);
  --animate-drawer-out-right: slide-out-right 200ms var(--duration-emphasized-out);
  --animate-drawer-in-bottom: slide-in-bottom 400ms var(--duration-emphasized-in);
  --animate-drawer-out-bottom: slide-out-bottom 200ms var(--duration-emphasized-out);
  --animate-drawer-in-top: slide-in-top 400ms var(--duration-emphasized-in);
  --animate-drawer-out-top: slide-out-top 200ms var(--duration-emphasized-out);

  @keyframes collapse-down {
    from {
      height: 0;
      opacity: 0;
    }

    to {
      height: var(--height);
      opacity: 1;
    }
  }

  @keyframes collapse-up {
    from {
      height: var(--height);
      opacity: 1;
    }

    to {
      height: 0;
      opacity: 0;
    }
  }

  @keyframes fade-in {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  @keyframes fade-out {
    from {
      opacity: 1;
    }

    to {
      opacity: 0;
    }
  }

  @keyframes slide-in-left {
    from {
      transform: translateX(-100%);
    }

    to {
      transform: translateX(0%);
    }
  }

  @keyframes slide-out-left {
    from {
      transform: translateX(0%);
    }

    to {
      transform: translateX(-100%);
    }
  }

  @keyframes slide-in-right {
    from {
      transform: translateX(100%);
    }

    to {
      transform: translateX(0%);
    }
  }

  @keyframes slide-out-right {
    from {
      transform: translateX(0%);
    }

    to {
      transform: translateX(100%);
    }
  }

  @keyframes slide-in-bottom {
    from {
      transform: translateY(100%);
    }

    to {
      transform: translateY(0%);
    }
  }

  @keyframes slide-out-bottom {
    from {
      transform: translateY(0%);
    }

    to {
      transform: translateY(100%);
    }
  }

  @keyframes slide-in-top {
    from {
      transform: translateY(-100%);
    }

    to {
      transform: translateY(0%);
    }
  }

  @keyframes slide-out-top {
    from {
      transform: translateY(0%);
    }

    to {
      transform: translateY(-100%);
    }
  }
}

@layer base {
  * {
    border-color: hsl(var(--border));
  }

  body {
    background-color: hsl(var(--background));
    font-feature-settings:
      "rlig" 1,
      "calt" 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: hsl(var(--foreground));
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  }
}