/* Custom styles - Tailwind processed via src/styles.css (Vite build pipeline) */

/* =====================================================
   VULCAN THEME SYSTEM — CSS Custom Properties
   Light mode defaults; overridden by admin-saved values
   injected via <style id="vulcan-theme"> at runtime
   ===================================================== */
/* Runcrate-style neutral grays — light mode defaults */
:root {
  --vk-page-bg: #f9f9f9;
  --vk-sidebar-bg: #f9f9f9;
  --vk-card-bg: #fcfcfc;
  --vk-muted-bg: #f1f1f1;
  --vk-hover-bg: #ebebeb;
  --vk-border: #d4d4d4;
  --vk-border-medium: #e0e0e0;
  --vk-border-subtle: #e8e8e8;
  --vk-text: #1a1a1a;
  --vk-text-primary: #1a1a1a;
  --vk-text-muted: #6e6e6e;
  --vk-accent: #3c83f6;
  --vk-nav-active-bg: #ebebeb;
  --vk-nav-active-text: #1a1a1a;
  --vk-nav-active-icon: #1a1a1a;
}

.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 — neutral grays, no blue tint */
html:not(.dark) .bg-gray-50 {
  background-color: #f1f1f1 !important;
}
html:not(.dark) .bg-gray-100 {
  background-color: #ebebeb !important;
}
html:not(.dark) .bg-gray-200 {
  background-color: #e0e0e0 !important;
}
html:not(.dark) .bg-zinc-100 {
  background-color: #ebebeb !important;
}
html:not(.dark) .bg-zinc-200 {
  background-color: #e0e0e0 !important;
}
html:not(.dark) .bg-white {
  background-color: #fcfcfc !important;
}

/* Borders — neutral 3-step scale */
html:not(.dark) .border-gray-100 {
  border-color: #e8e8e8 !important;
}
html:not(.dark) .border-gray-200 {
  border-color: #d4d4d4 !important;
}
html:not(.dark) .border-gray-300 {
  border-color: #c4c4c4 !important;
}

/* Text — neutral grays */
html:not(.dark) .text-gray-400 {
  color: #6e6e6e !important;
}
html:not(.dark) .text-gray-500 {
  color: #6e6e6e !important;
}
html:not(.dark) .text-gray-600 {
  color: #6e6e6e !important;
}
html:not(.dark) .text-gray-700 {
  color: #4a4a4a !important;
}
html:not(.dark) .text-gray-900 {
  color: #1a1a1a !important;
}

/* Body text → neutral primary */
html:not(.dark) body {
  color: #1a1a1a !important;
}

/* Scrollbar — neutral gray */
html:not(.dark) ::-webkit-scrollbar-thumb {
  background: rgba(110, 110, 110, 0.3);
}
html:not(.dark) ::-webkit-scrollbar-thumb:hover {
  background: rgba(110, 110, 110, 0.6);
}

/* Card depth — neutral layered shadow */
html:not(.dark) [class*='rounded-xl'][class*='border'],
html:not(.dark) [class*='rounded-2xl'][class*='border'] {
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.04),
    0 1px 2px rgba(0, 0, 0, 0.06),
    0 2px 8px rgba(0, 0, 0, 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;
}