@import "tailwindcss";

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

@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);

  /* Cyan palette mappings */
  --color-cyan: var(--cyan);
  --color-cyan-500: var(--cyan);
  --color-lightcyan: var(--lightcyan);
  --color-darkcyan: var(--darkcyan);

  --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;

  /* Cyan AI accent — rgb(12, 96, 96) ONLY for light mode */
  --cyan: rgb(12, 96, 96);
  --cyan-ai: rgb(12, 96, 96);
  --cyan-ai-10: rgba(12, 96, 96, 0.10);
  --cyan-ai-20: rgba(12, 96, 96, 0.20);
  --cyan-ai-30: rgba(12, 96, 96, 0.30);
  --cyan-ai-40: rgba(12, 96, 96, 0.40);
  --cyan-ai-50: rgba(12, 96, 96, 0.50);
  --cyan-ai-80: rgba(12, 96, 96, 0.80);

  /* Standard lightcyan and darkcyan remain identical/untouched */
  --lightcyan: #e0ffff;
  --darkcyan: #008b8b;
}

.dark {
  --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;

  /* Cyan AI accent — neon cyan in dark mode */
  --cyan: #00F0FF;
  --cyan-ai: #00F0FF;
  --cyan-ai-10: rgba(0, 240, 255, 0.10);
  --cyan-ai-20: rgba(0, 240, 255, 0.20);
  --cyan-ai-30: rgba(0, 240, 255, 0.30);
  --cyan-ai-40: rgba(0, 240, 255, 0.40);
  --cyan-ai-50: rgba(0, 240, 255, 0.50);
  --cyan-ai-80: rgba(0, 240, 255, 0.80);

  /* Standard lightcyan and darkcyan remain identical/untouched */
  --lightcyan: #e0ffff;
  --darkcyan: #008b8b;
}

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

/* ─── Light mode: flatten card shadows so they don't look 3D/lifted ─── */
:root:not(.dark) .shadow-sm,
:root:not(.dark) .shadow,
:root:not(.dark) .shadow-md,
:root:not(.dark) .shadow-lg,
:root:not(.dark) .shadow-xl,
:root:not(.dark) .shadow-2xl,
:root:not(.dark) [class*="shadow-"] {
  box-shadow: none !important;
}

@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);
}