/* ==============================
   Kamite Crew — Global CSS
   ============================== */

/* Light (default) */
:root {
  --bg-base:    #f9fafb;  /* gray-50  */
  --bg-surface: #ffffff;
  --bg-input:   #ffffff;
  --bg-hover:   #f3f4f6;  /* gray-100 */
  --text-hi:    #111827;  /* gray-900 */
  --text-lo:    #4b5563;  /* gray-600 */
  --text-muted: #6b7280;  /* gray-500 */
  --border:     #e5e7eb;  /* gray-200 */
  --border-str: #d1d5db;  /* gray-300 */
}

/* Dark */
html.dark {
  --bg-base:    #030712;  /* gray-950 */
  --bg-surface: #111827;  /* gray-900 */
  --bg-input:   #1f2937;  /* gray-800 */
  --bg-hover:   #1f2937;  /* gray-800 */
  --text-hi:    #f9fafb;  /* gray-50  */
  --text-lo:    #9ca3af;  /* gray-400 */
  --text-muted: #6b7280;  /* gray-500 */
  --border:     #1f2937;  /* gray-800 */
  --border-str: #374151;  /* gray-700 */
}

/* ---- Theme toggle pill ---- */
.theme-toggle {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--bg-hover);
  border-radius: 8px;
  padding: 3px;
  border: 1px solid var(--border);
}

.theme-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 24px;
  border-radius: 5px;
  font-size: 13px;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--text-muted);
  transition: background 0.15s, box-shadow 0.15s;
  line-height: 1;
}

.theme-btn.theme-active {
  background: var(--bg-surface);
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  color: var(--text-hi);
}

/* ---- Status pills (dashboard) ---- */
.status-pending    { background: #dbeafe; color: #1e40af; }
.status-processing { background: #d1fae5; color: #065f46; }
.status-completed  { background: #dcfce7; color: #166534; }
.status-failed     { background: #fee2e2; color: #991b1b; }

html.dark .status-pending    { background: #1e3a5f; color: #93c5fd; }
html.dark .status-processing { background: #1a2e3b; color: #34d399; }
html.dark .status-completed  { background: #14532d; color: #86efac; }
html.dark .status-failed     { background: #450a0a; color: #fca5a5; }