@import "tailwindcss";

@source "./**/*.{ts,tsx}";
@source "../vite/**/*.{ts,tsx,html}";
@source "../next/**/*.{ts,tsx}";

/* Theme variables */
:root {
  /* Dark mode (default) */
  --bg-primary: #0a0a0b;
  --bg-secondary: #111113;
  --bg-tertiary: #1a1a1c;
  --bg-elevated: #1f1f23;
  --bg-hover: rgba(63, 63, 70, 0.4);
  --bg-active: rgba(63, 63, 70, 0.8);

  --border-primary: rgba(63, 63, 70, 0.5);
  --border-secondary: #3f3f46;

  --text-primary: #fafafa;
  --text-secondary: #a1a1aa;
  --text-tertiary: #71717a;
  --text-muted: #52525b;

  --scrollbar-thumb: #3f3f46;
  --scrollbar-thumb-hover: #52525b;

  --code-bg: #1f1f22;
  --shimmer-color: rgba(255, 255, 255, 0.05);
}

.light {
  --bg-primary: #ffffff;
  --bg-secondary: #f9fafb;
  --bg-tertiary: #f3f4f6;
  --bg-elevated: #ffffff;
  --bg-hover: rgba(0, 0, 0, 0.05);
  --bg-active: rgba(0, 0, 0, 0.1);

  --border-primary: #e5e7eb;
  --border-secondary: #d1d5db;

  --text-primary: #111827;
  --text-secondary: #4b5563;
  --text-tertiary: #6b7280;
  --text-muted: #9ca3af;

  --scrollbar-thumb: #d1d5db;
  --scrollbar-thumb-hover: #9ca3af;

  --code-bg: #F8F7F7;
  --shimmer-color: rgba(0, 0, 0, 0.05);
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 6px;
}

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

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

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

/* Smooth transitions */
* {
  scroll-behavior: smooth;
}

/* Input placeholder styling */
textarea::placeholder {
  color: var(--text-tertiary);
}

/* Hide scrollbar utility */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* Focus ring override */
*:focus {
  outline: none;
}

/* Animation keyframes */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.animate-fade-in {
  animation: fadeIn 0.2s ease-out;
}

.animate-slide-in {
  animation: slideIn 0.2s ease-out;
}

.animate-pulse-slow {
  animation: pulse 2s ease-in-out infinite;
}

/* Workblock loading shimmer */
.workblock-shimmer {
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--shimmer-color) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* Theme transition and base styles */
html, body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Color scheme for light-dark() CSS function */
:root {
  color-scheme: dark;
}
.light {
  color-scheme: light;
}

/* Override Shiki's inline background color */
.shiki,
.shiki pre,
.shiki code {
  background-color: var(--code-bg) !important;
}