@import "tailwindcss";
@plugin "@tailwindcss/typography";
@custom-variant dark (&:where(.dark, .dark *));

/* Ensure dark mode classes have proper specificity */
.dark .dark\:text-gray-300 {
  color: rgb(209 213 219) !important;
}

.dark .dark\:text-white {
  color: rgb(255 255 255) !important;
}

.dark .dark\:bg-\[\#1a1925\] {
  background-color: rgb(26 25 37) !important;
}

/* Override MUI Typography color in dark mode */
.dark .MuiTypography-root.dark\:text-gray-300 {
  color: rgb(209 213 219) !important;
}

.dark .MuiTypography-root.dark\:text-white {
  color: rgb(255 255 255) !important;
}

:root {
  --background: #ffffff;
  --foreground: #171717;
  --primary: #3b84d9;
  --primary-foreground: #ffffff;
  --secondary: #f1f5f9;
  --secondary-foreground: #0f172a;
  --accent: #f1f5f9;
  --accent-foreground: #0f172a;
  --destructive: #ef4444;
  --destructive-foreground: #ffffff;
  --border: #e2e8f0;
  --input: #e2e8f0;
  --ring: #3b84d9;
}

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

/* Dark mode colors */
.dark {
  --background: #0a0a0a;
  --foreground: #ededed;
  --primary: #3b84d9;
  --primary-foreground: #ffffff;
  --secondary: #1e293b;
  --secondary-foreground: #f8fafc;
  --accent: #1e293b;
  --accent-foreground: #f8fafc;
  --destructive: #7f1d1d;
  --destructive-foreground: #ffffff;
  --border: #334155;
  --input: #334155;
  --ring: #3b84d9;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

* {
  font-family: "Inter", sans-serif;
  scroll-behavior: smooth;
}

body,
html {
  margin: 0;
  padding: 0;
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: 'Caveat', cursive;
}

.font-inter {
  font-family: 'Inter', sans-serif;
}

.font-caveat {
  font-family: 'Caveat', cursive;
}

.font-instrument-sans {
  font-family: 'Inter', sans-serif;
}

.font-open-sauce {
  font-family: 'Inter', sans-serif;
}

@keyframes subtle-ripple {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

@keyframes subtle-ripple-delayed {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

@keyframes vibrate {
  0%,
  100% {
    transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-2px);
  }
  20%,
  40%,
  60%,
  80% {
    transform: translateX(2px);
  }
}

.main-screen {
  background-image: url("../../public/images/Hero.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.dark .main-screen {
  background-image: url("../../public/images/img-frame.png");
}

@keyframes marquee {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}
.animate-marquee {
  display: flex;
  animation: marquee 20s linear infinite;
  width: max-content;
}

#pricing,
#moreInfo {
  scroll-margin-top: 75px;
}

.restore-defaults {
  all: revert;
  font-family: inherit;
  color: inherit;
}
@keyframes countFlipAnim {
  0% {
    transform: rotateX(0deg);
    opacity: 0.4;
  }
  50% {
    transform: rotateX(90deg);
    opacity: 0.7;
  }
  100% {
    transform: rotateX(0deg);
    opacity: 1;
  }
}

.count-flip {
  animation: countFlipAnim 0.4s ease-in-out;
  will-change: transform, opacity;
}

* {
  scroll-behavior: smooth;
}

/* Add this to your globals.css */
@layer utilities {
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }
  .no-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }
}