bichon/web/src/index.css

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

@layer base {
  :root {
      --background: 271 8% 98%;
      --foreground: 271 56% 6%;
      --muted: 271 8% 92%;
      --muted-foreground: 271 10% 35%;
      --popover: 271 8% 98%;
      --popover-foreground: 271 56% 6%;
      --card: 271 8% 97%;
      --card-foreground: 271 56% 5%;
      --border: 271 6% 88%;
      --input: 271 6% 88%;
      --primary: 271 60% 66%;
      --primary-foreground: 0 0% 0%;
      --secondary: 91 55% 58%;
      --secondary-foreground: 91 50% 10%;
      --accent: 91 55% 58%;
      --accent-foreground: 91 50% 10%;
      --destructive: 17 85% 48%;
      --destructive-foreground: 0 0% 100%;
      --ring: 271 60% 66%;
      --chart-1: 271 60% 66%;
      --chart-2: 91 55% 58%;
      --chart-3: 91 55% 58%;
      --chart-4: 91 55% 62%;
      --chart-5: 271 63% 66%;
      --radius: 0.5rem;
      /* Sidebar */
      --sidebar-background: 271 8% 98%;
      --sidebar-foreground: 271 56% 6%;
      --sidebar-primary: 271 60% 66%;
      --sidebar-primary-foreground: 0 0% 0%;
      --sidebar-accent: 91 55% 58%;
      --sidebar-accent-foreground: 91 50% 10%;
      --sidebar-border: 271 6% 88%;
      --sidebar-ring: 271 60% 66%;
  }
  .dark {
      --background: 271 20% 10%;
      --foreground: 271 10% 96%;
      --muted: 271 10% 14%;
      --muted-foreground: 271 10% 65%;
      --popover: 271 20% 10%;
      --popover-foreground: 271 10% 96%;
      --card: 271 20% 13%;
      --card-foreground: 0 0% 100%;
      --border: 271 12% 22%;
      --input: 271 12% 22%;
      --primary: 271 50% 66%;
      --primary-foreground: 0 0% 0%;
      --secondary: 91 45% 58%;
      --secondary-foreground: 91 40% 10%;
      --accent: 91 45% 58%;
      --accent-foreground: 91 40% 10%;
      --destructive: 17 85% 55%;
      --destructive-foreground: 0 0% 100%;
      --ring: 271 50% 66%;
      --chart-1: 271 50% 66%;
      --chart-2: 91 45% 58%;
      --chart-3: 91 45% 58%;
      --chart-4: 91 45% 62%;
      --chart-5: 271 55% 66%;

      /* Sidebar */
      --sidebar-background: 271 20% 10%;
      --sidebar-foreground: 271 10% 96%;
      --sidebar-primary: 271 50% 66%;
      --sidebar-primary-foreground: 0 0% 0%;
      --sidebar-accent: 91 45% 58%;
      --sidebar-accent-foreground: 91 40% 10%;
      --sidebar-border: 271 12% 22%;
      --sidebar-ring: 271 50% 66%;
  }
  

  /* styles.css */
  .CollapsibleContent {
    overflow: hidden;
  }
  .CollapsibleContent[data-state='open'] {
    animation: slideDown 300ms ease-out;
  }
  .CollapsibleContent[data-state='closed'] {
    animation: slideUp 300ms ease-out;
  }

  @keyframes slideDown {
    from {
      height: 0;
    }
    to {
      height: var(--radix-collapsible-content-height);
    }
  }

  @keyframes slideUp {
    from {
      height: var(--radix-collapsible-content-height);
    }
    to {
      height: 0;
    }
  }

  /* Prevent focus zoom on mobile devices */
  @media screen and (max-width: 767px) {
    input,
    select,
    textarea {
      font-size: 16px !important;
    }
  }
}

@layer utilities {
  /* Hide scrollbar for Chrome, Safari and Opera */
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }
  /* Hide scrollbar for IE, Edge and Firefox */
  .no-scrollbar {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }

  .faded-bottom {
    @apply after:pointer-events-none after:absolute after:bottom-0 after:left-0 after:hidden after:h-32 after:w-full after:bg-[linear-gradient(180deg,_transparent_10%,_hsl(var(--background))_70%)] after:md:block;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  html {
    @apply overflow-x-hidden;
  }
  body {
    @apply min-h-svh w-full bg-background text-foreground;
  }
}