@import "tailwindcss";

@theme {
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);

  --color-background: var(--background);
  --color-foreground: var(--foreground);

  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);

  --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-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);

  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
}

:root {
  --background: #ffffff;
  --foreground: #171717;
  --border: #e5e5e5;
  --input: #e5e5e5;
  --ring: #171717;

  --primary: #171717;
  --primary-foreground: #fafafa;
  --secondary: #f5f5f5;
  --secondary-foreground: #171717;
  --accent: #f5f5f5;
  --accent-foreground: #171717;
  --muted: #f5f5f5;
  --muted-foreground: #737373;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
    --border: #1f1f1f;
    --input: #1f1f1f;
    --ring: #D1FF4D;

    --primary: #D1FF4D;
    --primary-foreground: #0a0a0a;
    --secondary: #171717;
    --secondary-foreground: #ededed;
    --accent: #00F0FF;
    --accent-foreground: #0a0a0a;
    --muted: #171717;
    --muted-foreground: #a3a3a3;
  }
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans), Arial, Helvetica, sans-serif;
  @apply antialiased selection:bg-primary/20;
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
  
  .bg-grid {
    background-size: 40px 40px;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                      linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  }

  .animate-gradient {
    background-size: 200% auto;
    animation: gradient-shift 4s linear infinite;
  }

  .animate-marquee {
    animation: marquee 30s linear infinite;
  }

  .animate-shine {
    animation: shine 3s infinite linear;
  }
}

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

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

@keyframes shine {
  0% { transform: translateX(-100%) skewX(-15deg); }
  30% { transform: translateX(200%) skewX(-15deg); }
  100% { transform: translateX(200%) skewX(-15deg); }
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--background);
}
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--muted-foreground);
}