@import "tailwindcss";

@theme {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-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);
  --radius: var(--radius);
}

@layer base {
  :root {
    /* Light Mode - Slate Refresh */
    --background: #F8FAFC;
    /* Slate-50 */
    --foreground: #0F172A;
    /* Slate-900 */
    --card: #FFFFFF;
    --card-foreground: #1E293B;
    /* Slate-800 */
    --popover: rgba(255, 255, 255, 0.8);
    --popover-foreground: #0F172A;
    --primary: #7C3AED;
    /* Violet-600 */
    --primary-foreground: #FFFFFF;
    --secondary: #E2E8F0;
    /* Slate-200 */
    --secondary-foreground: #0F172A;
    --muted: #F1F5F9;
    /* Slate-100 */
    --muted-foreground: #64748B;
    /* Slate-500 */
    --accent: #E2E8F0;
    --accent-foreground: #0F172A;
    --destructive: #EF4444;
    --destructive-foreground: #FFFFFF;
    --border: #E2E8F0;
    /* Slate-200 */
    --input: #F1F5F9;
    --ring: rgba(124, 58, 237, 0.4);
    --radius: 1.25rem;
    /* Modern rounded corners (20px) */

    /* Spacing & Effects */
    --header-height: 4rem;
    --nav-height: 5rem;
    --shadow-soft: 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05);
    --shadow-md: 0 10px 15px -3px rgb(0 0 0 / 0.07), 0 4px 6px -4px rgb(0 0 0 / 0.07);
    --shadow-lg: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  }

  .dark {
    /* Dark Mode - Deep Navy Slate */
    --background: #0F172A;
    /* Slate-900 */
    --foreground: #F8FAFC;
    /* Slate-50 */
    --card: #1E293B;
    /* Slate-800 */
    --card-foreground: #F1F5F9;
    --popover: rgba(30, 41, 59, 0.8);
    --popover-foreground: #F8FAFC;
    --primary: #8B5CF6;
    /* Violet-500 (brighter for dark) */
    --primary-foreground: #FFFFFF;
    --secondary: #334155;
    /* Slate-700 */
    --secondary-foreground: #F8FAFC;
    --muted: #334155;
    /* Slate-700 */
    --muted-foreground: #94A3B8;
    /* Slate-400 */
    --accent: #334155;
    --accent-foreground: #F8FAFC;
    --destructive: #F87171;
    --destructive-foreground: #FFFFFF;
    --border: #334155;
    /* Slate-700 */
    --input: #0F172A;
    --ring: rgba(139, 92, 246, 0.5);

    --shadow-soft: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3);
    --shadow-md: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.4);
    --shadow-lg: 0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.5);
  }

  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground transition-colors duration-300;
  }
}

/* Custom Scrollbar - Minimal & Modern */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

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

::-webkit-scrollbar-thumb {
  background: var(--muted);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--muted-foreground);
}

/* Utility Classes for Modern Look */
.glass-panel {
  @apply bg-popover backdrop-blur-xl border border-white/10 dark:border-white/5;
}

.shadow-premium {
  box-shadow: var(--shadow-md);
}

.shadow-premium-lg {
  box-shadow: var(--shadow-lg);
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}