@import './tailwind.colors-hsl.css';

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

@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: hsl(var(--border));
  }
  button:not(:disabled),
  [role='button']:not(:disabled) {
    cursor: pointer;
  }
  .theme {
    --animate-marquee: marquee var(--duration) infinite linear;
    --animate-marquee-vertical: marquee-vertical var(--duration) linear infinite;
  }
}
@layer utilities {
  body {
    font-family: Arial, Helvetica, sans-serif;
  }
}

@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: 175 78% 43%; */
    --primary: 0 0% 20.5%;

    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    /* --ring: 175 78% 43%; */
    --ring: 0 0% 20.5%;

    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --radius: 0.5rem;
    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;
    --success: 120 39.3% 54.1%;
    --success-foreground: 210 40% 98%;
    --warning: 45 89% 53.1%;
    --warning-foreground: 210 40% 98%;
    --info: 205.9 78% 60%;
    --info-foreground: 210 40% 98%;
    --error: 0 72.2% 50.6%;
    --error-foreground: 210 40% 98%;
  }
  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 175 78% 43%;
    --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.4 16.3% 63.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 50%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 175 78% 43%;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --radius: 0.5rem;
    --success: 120 39.3% 54.1%;
    --success-foreground: 210 40% 98%;
    --warning: 45 89% 53.1%;
    --warning-foreground: 210 40% 98%;
    --info: 205.9 78% 60%;
    --info-foreground: 210 40% 98%;
    --error: 0 72.2% 50.6%;
    --error-foreground: 210 40% 98%;
    --secondary: var(--slate-800);
    --chart-1: var(--red-400);
    --chart-2: var(--orange-400);
    --chart-3: var(--amber-400);
    --chart-4: var(--yellow-400);
    --chart-5: var(--lime-400);
    --chart-6: var(--green-400);
    --chart-7: var(--teal-400);
    --chart-8: var(--cyan-400);
    --chart-9: var(--blue-400);
    --chart-10: var(--violet-400);
    --sidebar-primary-foreground: var(--base-white);
    --sidebar-primary: var(--blue-700);
    --sidebar-foreground: var(--slate-100);
    --sidebar-background: var(--slate-900);
    --sidebar-accent: var(--slate-800);
    --sidebar-accent-foreground: var(--slate-900);
    --sidebar-border: var(--slate-800);
    --sidebar-ring: var(--slate-300);
    --table-background-primary: var(--slate-950);
    --table-background-alternative: var(--slate-900);
  }
}

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

@theme inline {
  @keyframes marquee {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(calc(-100% - var(--gap)));
    }
  }
  @keyframes marquee-vertical {
    from {
      transform: translateY(0);
    }
    to {
      transform: translateY(calc(-100% - var(--gap)));
    }
  }
}