@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

@theme {
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));
  --color-card: hsl(var(--card));
  --color-card-foreground: hsl(var(--card-foreground));
  --color-popover: hsl(var(--popover));
  --color-popover-foreground: hsl(var(--popover-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-muted: hsl(var(--muted));
  --color-muted-foreground: hsl(var(--muted-foreground));
  --color-accent: hsl(var(--accent));
  --color-accent-foreground: hsl(var(--accent-foreground));
  --color-destructive: hsl(var(--destructive));
  --color-destructive-foreground: hsl(var(--destructive-foreground));
  --color-border: hsl(var(--border));
  --color-input: hsl(var(--input));
  --color-ring: hsl(var(--ring));
  --color-chart-1: hsl(var(--chart-1));
  --color-chart-2: hsl(var(--chart-2));
  --color-chart-3: hsl(var(--chart-3));
  --color-chart-4: hsl(var(--chart-4));
  --color-chart-5: hsl(var(--chart-5));
  --color-teal: hsl(var(--teal));
  --color-teal-light: hsl(var(--teal-light));
  --color-teal-dark: hsl(var(--teal-dark));
  --color-background-primary: var(--background-primary);
  --color-foreground-primary: var(--foreground-primary);
  --color-foreground-tertiary: var(--foreground-tertiary);
}

@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }
}

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 0, 0%, 12%;
    --card: 0 0% 100%;
    --card-foreground: 0, 0%, 12%;
    --popover: 0 0% 100%;
    --popover-foreground: 0, 0%, 12%;
    --primary: 24 9.8% 10%;
    --primary-foreground: 60, 21%, 97%;
    --secondary: 60 4.8% 95.9%;
    --secondary-foreground: 24 9.8% 10%;
    --muted: 60 4.8% 95.9%;
    --muted-foreground: 25 5.3% 44.7%;
    --accent: 60 4.8% 95.9%;
    --accent-foreground: 24 9.8% 10%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 60, 21%, 97%;
    --border: 20 5.9% 90%;
    --input: 20 5.9% 90%;
    --ring: 0, 0%, 12%;
    --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%;
    --teal: 175 75% 42%;
    --teal-light: 175 75% 52%;
    --teal-dark: 175 75% 32%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 0, 0%, 12%;
    --foreground: 60, 21%, 97%;
    --card: 0, 0%, 12%;
    --card-foreground: 60, 21%, 97%;
    --popover: 0, 0%, 12%;
    --popover-foreground: 60, 21%, 97%;
    --primary: 60, 21%, 97%;
    --primary-foreground: 24 9.8% 10%;
    --secondary: 0, 0%, 24%;
    --secondary-foreground: 60, 21%, 97%;
    --muted: 0, 0%, 24%;
    --muted-foreground: 24 5.4% 63.9%;
    --accent: 0, 0%, 24%;
    --accent-foreground: 60, 21%, 97%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 60, 21%, 97%;
    --border: 0, 0%, 24%;
    --input: 0, 0%, 24%;
    --ring: 24 5.7% 82.9%;
    --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%;
    --teal: 175 65% 58%;
    --teal-light: 175 65% 68%;
    --teal-dark: 175 65% 48%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  html,
  body {
    @apply bg-background text-foreground overflow-hidden;

    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
  }

  /* Скрываем скролл-бары, но сохраняем функциональность скролла */

  /* Для WebKit (Chrome, Safari, новые версии Edge) */
  ::-webkit-scrollbar {
    width: 0;
    height: 0;
    background: transparent;
  }

  /* Для Firefox */
  * {
    scrollbar-width: none;
  }

  /* Для IE и Edge */
  * {
    -ms-overflow-style: none;
  }
}

/* Стили для ползунка масштабирования */
input[type="range"] {
  appearance: none;
  height: 2px;
  outline: none;
}

input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 12px;
  height: 12px;
  background: var(--color-teal);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
}

input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.1);
  background: var(--color-teal-light);
}

input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  background: var(--color-teal);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
}

input[type="range"]::-moz-range-thumb:hover {
  transform: scale(1.1);
  background: var(--color-teal-light);
}

/* Стили для ползунка в темной теме */
.dark input[type="range"]::-webkit-slider-thumb {
  background: var(--color-teal);
}

.dark input[type="range"]::-webkit-slider-thumb:hover {
  background: var(--color-teal-light);
}

.dark input[type="range"]::-moz-range-thumb {
  background: var(--color-teal);
}

.dark input[type="range"]::-moz-range-thumb:hover {
  background: var(--color-teal-light);
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }

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

.marquee-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.marquee-content {
  display: inline-block;
  animation: marquee 12s linear forwards;
  animation-play-state: paused;
}

.marquee-container:hover .marquee-content {
  animation-play-state: running;
}

/* Стиль для текста, который не нужно анимировать */
.marquee-text {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

/* Убираем старые стили */
.animate-marquee,
.animate-marquee2,
.relative.overflow-hidden {
  display: none;
}