@import "tailwindcss";

:root {
  --background: #111111;
  --foreground: #ffffff;
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.8);
  --text-muted: rgba(255, 255, 255, 0.6);
  --border-color: rgba(255, 255, 255, 0.2);
  --icon-filter: brightness(1);
  --overlay-color: rgba(0, 0, 0, 0.4);
  --overlay-hover-color: rgba(0, 0, 0, 0.7);
  --faq-overlay: rgba(255, 255, 255, 0.13);
  --main-color: #ffffff;
  --text-main-color: #000000;
  --svg-color: #ffffff;
  --svg-gradient: rgba(148, 148, 148, 0.137);
      --svg-gradient-secondary: rgba(255, 255, 255, 0.39);

}

:root.light {
  --background: #ffffff;
  --foreground: #0a0a0a;
  --text-primary: #0a0a0a;
  --text-secondary: rgba(10, 10, 10, 0.8);
  --text-muted: rgba(10, 10, 10, 0.6);
  --border-color: rgba(10, 10, 10, 0.2);
  --icon-filter: brightness(0);
  --overlay-color: rgba(0, 0, 0, 0.5);
  --overlay-hover-color: rgba(0, 0, 0, 0.75);
  --faq-overlay: rgba(88, 88, 88, 0.041);
  --main-color: #101010;
  --text-main-color: #f4f4f4;
  --svg-color: rgb(27, 27, 27);
    --svg-gradient: rgba(231, 231, 231, 0.1);
    --svg-gradient-secondary: rgba(48, 48, 48, 0.644);

}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-text-primary: var(--text-primary);
  --color-text-secondary: var(--text-secondary);
  --color-text-muted: var(--text-muted);
  --color-border: var(--border-color);
  --color-overlay: var(--overlay-color);
  --color-overlay-hover: var(--overlay-hover-color);
  --font-monta: var(--font-monta);
  --background: var(--background);
}

body {
  background: var(--background);
  color: var(--foreground);
  transition: background-color 0.3s ease, color 0.3s ease;
}

::-webkit-scrollbar {
  width: 8px;  
  height: 8px; 
}

::-webkit-scrollbar-track {
  background: transparent; 
}

::-webkit-scrollbar-thumb {
  background-color: var(--main-color);
  border-radius: 10px;
  border: 2px solid transparent; 
  background-clip: content-box; 
}

::-webkit-scrollbar-thumb:hover {
  filter: brightness(1.2); 
}

.bg-main-color {
  background-color: var(--main-color);
}
.svg-gradient-secondary {
  background: var(--svg-gradient-secondary) ;
}
.fill-main-color {
  fill: var(--main-color);
}
.text2-main-color {
    color: var(--main-color);
}
.text-main-color {
  color: var(--text-main-color);
}
.svg-color {
    color: var(--svg-color);

}
.icon-adaptive {
  filter: var(--icon-filter);
}

.light-mode-only {
  opacity: 0;
}

:root.light .light-mode-only {
  opacity: 1;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}