/* Custom styles - most styling handled by Tailwind CDN */

/* =====================================================
   VULCAN THEME SYSTEM — CSS Custom Properties
   Light mode defaults; overridden by admin-saved values
   injected via <style id="vulcan-theme"> at runtime
   ===================================================== */
/* Radix Slate + Indigo — light mode defaults */
:root {
  --vk-page-bg: #f8f9fb; /* slate-2 */
  --vk-sidebar-bg: #ffffff;
  --vk-border: #e0e1e6; /* slate-5 — visible but not heavy */
  --vk-text: #1c2024; /* slate-12 */
  --vk-text-muted: #60646c; /* slate-11 */
  --vk-accent: #3e63dd; /* indigo-9 */
  --vk-nav-active-bg: #edf2fe; /* indigo-3 */
  --vk-nav-active-text: #3a5bc7; /* indigo-11 */
}

.dark {
  --vk-page-bg: #0b0c0e;
  --vk-sidebar-bg: #15171e;
  --vk-border: #1f2128;
  --vk-text: #f1f5f9;
  --vk-text-muted: #9ca3af;
  --vk-accent: #6366f1;
  --vk-nav-active-bg: #1e2035;
  --vk-nav-active-text: #818cf8;
}

/* =====================================================
   LIGHT MODE PALETTE OVERRIDES — Radix Slate scale
   Maps hardcoded Tailwind gray/zinc utilities → slate.
   !important beats Tailwind CDN's dynamically-injected
   <style> tag which appears after this file in source order.
   ===================================================== */

/* Backgrounds */
html:not(.dark) .bg-gray-50 {
  background-color: #f8f9fb !important;
} /* slate-2 */
html:not(.dark) .bg-gray-100 {
  background-color: #f0f0f3 !important;
} /* slate-3 */
html:not(.dark) .bg-gray-200 {
  background-color: #e8e8ec !important;
} /* slate-4 */
html:not(.dark) .bg-zinc-100 {
  background-color: #f0f0f3 !important;
} /* slate-3 */
html:not(.dark) .bg-zinc-200 {
  background-color: #e8e8ec !important;
} /* slate-4 */
html:not(.dark) .bg-white {
  background-color: #ffffff !important;
}

/* Borders */
html:not(.dark) .border-gray-100 {
  border-color: #e8e8ec !important;
} /* slate-4 */
html:not(.dark) .border-gray-200 {
  border-color: #e0e1e6 !important;
} /* slate-5 */
html:not(.dark) .border-gray-300 {
  border-color: #d9d9e0 !important;
} /* slate-6 */

/* Text */
html:not(.dark) .text-gray-400 {
  color: #8b8d98 !important;
} /* slate-9 */
html:not(.dark) .text-gray-500 {
  color: #8b8d98 !important;
} /* slate-9 */
html:not(.dark) .text-gray-600 {
  color: #60646c !important;
} /* slate-11 */
html:not(.dark) .text-gray-700 {
  color: #60646c !important;
} /* slate-11 */
html:not(.dark) .text-gray-900 {
  color: #1c2024 !important;
} /* slate-12 */

/* Override legacy navy body text → slate-12 */
html:not(.dark) body {
  color: #1c2024 !important;
}

/* Scrollbar — slate-9 tinted for light mode */
html:not(.dark) ::-webkit-scrollbar-thumb {
  background: rgba(139, 141, 152, 0.3);
}
html:not(.dark) ::-webkit-scrollbar-thumb:hover {
  background: rgba(139, 141, 152, 0.6);
}

/* Card depth — layered shadow, Linear-style */
html:not(.dark) [class*='rounded-xl'][class*='border'],
html:not(.dark) [class*='rounded-2xl'][class*='border'] {
  box-shadow:
    0 0 0 1px rgba(28, 32, 36, 0.04),
    0 1px 2px rgba(28, 32, 36, 0.06),
    0 2px 8px rgba(28, 32, 36, 0.04);
}

/* Task description HTML rendering */
.task-description strong {
  display: inline;
  font-weight: 700;
  color: inherit;
}
.task-description ul,
.task-description ol {
  margin: 0.375rem 0 0.75rem 0;
  padding-left: 1.25rem;
}
.task-description li {
  margin: 0.25rem 0;
}
.task-description br + br {
  display: block;
  content: '';
  margin-top: 0.5rem;
}
.task-description[contenteditable='true']:empty::before {
  content: attr(data-placeholder);
  color: #9ca3af;
  pointer-events: none;
}

/* TipTap Editor Styles */
.tiptap p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  float: left;
  color: #9ca3af;
  pointer-events: none;
  height: 0;
}
.tiptap:focus {
  outline: none;
}
.tiptap.task-description a {
  color: #2563eb;
  text-decoration: underline;
}
.dark .tiptap.task-description a {
  color: #60a5fa;
}
.tiptap.task-description blockquote {
  border-left: 3px solid #d1d5db;
  padding-left: 1rem;
  color: #6b7280;
  margin: 0.5rem 0;
}
.dark .tiptap.task-description blockquote {
  border-left-color: #374151;
  color: #9ca3af;
}
.tiptap.task-description code {
  background: #f3f4f6;
  border-radius: 0.25rem;
  padding: 0.125rem 0.375rem;
  font-size: 0.85em;
  font-family: ui-monospace, monospace;
}
.dark .tiptap.task-description code {
  background: #1f2937;
}