@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: oklch(0.99 0.003 264);
    --foreground: oklch(0.18 0.013 264);
    --card: oklch(1 0 0);
    --card-foreground: oklch(0.18 0.013 264);
    --popover: oklch(1 0 0);
    --popover-foreground: oklch(0.18 0.013 264);
    --primary: oklch(0.55 0.18 280);
    --primary-foreground: oklch(0.985 0.003 264);
    --secondary: oklch(0.96 0.005 264);
    --secondary-foreground: oklch(0.22 0.013 264);
    --muted: oklch(0.96 0.005 264);
    --muted-foreground: oklch(0.45 0.013 264);
    --accent: oklch(0.94 0.012 280);
    --accent-foreground: oklch(0.22 0.013 264);
    --destructive: oklch(0.55 0.22 25);
    --destructive-foreground: oklch(0.985 0.003 264);
    --success: oklch(0.60 0.17 155);
    --success-foreground: oklch(0.985 0.003 264);
    --border: oklch(0.92 0.006 264);
    --input: oklch(0.92 0.006 264);
    --ring: oklch(0.55 0.18 280);
    --radius: 0.625rem;

    --bg-deep: oklch(0.97 0.003 264);
    --bg-base: oklch(0.99 0.002 264);
    --bg-elevated: oklch(1 0 0);
    --bg-hover: oklch(0.96 0.005 264);

    --accent-glow: oklch(0.55 0.18 280 / 0.12);
    --border-subtle: oklch(0.93 0.005 264);
    --border-hover: oklch(0.88 0.008 264);

    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  }

  .dark {
    --background: oklch(0.11 0.010 264);
    --foreground: oklch(0.92 0.006 264);
    --card: oklch(0.15 0.010 264);
    --card-foreground: oklch(0.92 0.006 264);
    --popover: oklch(0.15 0.010 264);
    --popover-foreground: oklch(0.92 0.006 264);
    --primary: oklch(0.66 0.20 280);
    --primary-foreground: oklch(0.11 0.010 264);
    --secondary: oklch(0.20 0.010 264);
    --secondary-foreground: oklch(0.92 0.006 264);
    --muted: oklch(0.20 0.010 264);
    --muted-foreground: oklch(0.58 0.010 264);
    --accent: oklch(0.22 0.014 280);
    --accent-foreground: oklch(0.92 0.006 264);
    --destructive: oklch(0.60 0.20 25);
    --destructive-foreground: oklch(0.92 0.006 264);
    --success: oklch(0.72 0.19 155);
    --success-foreground: oklch(0.11 0.010 264);
    --border: oklch(0.22 0.008 264);
    --input: oklch(0.22 0.008 264);
    --ring: oklch(0.66 0.20 280);

    --bg-deep: oklch(0.09 0.008 264);
    --bg-base: oklch(0.12 0.010 264);
    --bg-elevated: oklch(0.18 0.010 264);
    --bg-hover: oklch(0.21 0.010 264);

    --accent-glow: oklch(0.66 0.20 280 / 0.18);
    --border-subtle: oklch(0.20 0.008 264);
    --border-hover: oklch(0.32 0.010 264);
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground antialiased;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display',
      'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
  }
  pre, code {
    font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', Menlo, Consolas, monospace;
    font-size: 0.875em;
  }
}

@layer components {
  .card-elevated {
    @apply rounded-lg border bg-card shadow-sm transition-shadow duration-150 hover:shadow-md;
  }
}

@layer utilities {
  .glow-accent {
    box-shadow: 0 0 0 1px var(--accent-glow), 0 0 12px var(--accent-glow);
  }
  .glow-accent-sm {
    box-shadow: 0 0 0 1px var(--accent-glow);
  }
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
::-webkit-scrollbar:hover {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--border-hover);
}

/* Stagger fade-in animation */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slide-in-left {
  from {
    opacity: 0;
    transform: translateX(-4px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.animate-fade-in-up {
  animation: fade-in-up 250ms var(--ease-out-expo) both;
}

.animate-scale-in {
  animation: scale-in 300ms var(--ease-out-expo) both;
}

.animate-slide-in-left {
  animation: slide-in-left 200ms var(--ease-out-expo) both;
}

/* Stagger children */
.stagger-children > * {
  animation: fade-in-up 250ms var(--ease-out-expo) both;
}
.stagger-children > *:nth-child(1) { animation-delay: 0ms; }
.stagger-children > *:nth-child(2) { animation-delay: 30ms; }
.stagger-children > *:nth-child(3) { animation-delay: 60ms; }
.stagger-children > *:nth-child(4) { animation-delay: 90ms; }
.stagger-children > *:nth-child(5) { animation-delay: 120ms; }
.stagger-children > *:nth-child(6) { animation-delay: 150ms; }
.stagger-children > *:nth-child(7) { animation-delay: 180ms; }
.stagger-children > *:nth-child(8) { animation-delay: 210ms; }
.stagger-children > *:nth-child(9) { animation-delay: 240ms; }
.stagger-children > *:nth-child(10) { animation-delay: 270ms; }
