apps/ui/src/styles/themes/dark.css

/* Dark Theme */

:root.dark {
  /* Deep dark backgrounds - zinc-950 family */
  --background: oklch(0.04 0 0); /* zinc-950 */
  --background-50: oklch(0.04 0 0 / 0.5); /* zinc-950/50 */
  --background-80: oklch(0.04 0 0 / 0.8); /* zinc-950/80 */

  /* Text colors following hierarchy */
  --foreground: oklch(1 0 0); /* text-white */
  --foreground-secondary: oklch(0.588 0 0); /* text-zinc-400 */
  --foreground-muted: oklch(0.525 0 0); /* text-zinc-500 */

  /* Card and popover backgrounds */
  --card: oklch(0.14 0 0); /* slightly lighter than background for contrast */
  --card-foreground: oklch(1 0 0);
  --popover: oklch(0.1 0 0); /* slightly lighter than background */
  --popover-foreground: oklch(1 0 0);

  /* Brand colors - purple/violet theme */
  --primary: oklch(0.55 0.25 265); /* brand-500 */
  --primary-foreground: oklch(1 0 0);
  --brand-400: oklch(0.6 0.22 265);
  --brand-500: oklch(0.55 0.25 265);
  --brand-600: oklch(0.5 0.28 270); /* purple-600 for gradients */

  /* Glass morphism borders and accents */
  --secondary: oklch(1 0 0 / 0.05); /* bg-white/5 */
  --secondary-foreground: oklch(1 0 0);
  --muted: oklch(0.176 0 0); /* zinc-800 */
  --muted-foreground: oklch(0.588 0 0); /* text-zinc-400 */
  --accent: oklch(1 0 0 / 0.1); /* bg-white/10 for hover */
  --accent-foreground: oklch(1 0 0);

  /* Borders with transparency for glass effect */
  --border: oklch(0.176 0 0); /* zinc-800 */
  --border-glass: oklch(1 0 0 / 0.1); /* white/10 for glass morphism */
  --destructive: oklch(0.6 0.25 25);
  --input: oklch(0.04 0 0 / 0.8); /* Semi-transparent dark */
  --ring: oklch(0.55 0.25 265);

  /* Chart colors with brand theme */
  --chart-1: oklch(0.55 0.25 265);
  --chart-2: oklch(0.65 0.2 160);
  --chart-3: oklch(0.75 0.2 70);
  --chart-4: oklch(0.6 0.25 300);
  --chart-5: oklch(0.6 0.25 20);

  /* Sidebar with glass morphism */
  --sidebar: oklch(0.04 0 0 / 0.5); /* zinc-950/50 with backdrop blur */
  --sidebar-foreground: oklch(1 0 0);
  --sidebar-primary: oklch(0.55 0.25 265);
  --sidebar-primary-foreground: oklch(1 0 0);
  --sidebar-accent: oklch(1 0 0 / 0.05); /* bg-white/5 */
  --sidebar-accent-foreground: oklch(1 0 0);
  --sidebar-border: oklch(1 0 0 / 0.1); /* white/10 for glass borders */
  --sidebar-ring: oklch(0.55 0.25 265);

  /* Action button colors */
  --action-view: oklch(0.6 0.25 265); /* Purple */
  --action-view-hover: oklch(0.55 0.27 270);
  --action-followup: oklch(0.6 0.2 230); /* Blue */
  --action-followup-hover: oklch(0.55 0.22 230);
  --action-commit: oklch(0.55 0.2 140); /* Green */
  --action-commit-hover: oklch(0.5 0.22 140);
  --action-verify: oklch(0.55 0.2 140); /* Green */
  --action-verify-hover: oklch(0.5 0.22 140);

  /* Running indicator - Purple */
  --running-indicator: oklch(0.6 0.25 265);
  --running-indicator-text: oklch(0.65 0.22 265);

  /* Status colors - Dark mode */
  --status-success: oklch(0.65 0.2 140);
  --status-success-bg: oklch(0.65 0.2 140 / 0.2);
  --status-warning: oklch(0.75 0.15 70);
  --status-warning-bg: oklch(0.75 0.15 70 / 0.2);
  --status-error: oklch(0.65 0.22 25);
  --status-error-bg: oklch(0.65 0.22 25 / 0.2);
  --status-info: oklch(0.65 0.2 230);
  --status-info-bg: oklch(0.65 0.2 230 / 0.2);
  --status-backlog: oklch(0.6 0 0);
  --status-in-progress: oklch(0.75 0.15 70);
  --status-waiting: oklch(0.7 0.18 50);

  /* Shadow tokens - darker for dark mode */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
}

/* Theme-specific overrides */

.dark .content-bg {
  background: linear-gradient(135deg, oklch(0.04 0 0), oklch(0.08 0 0), oklch(0.04 0 0));
}

.dark .animated-outline-gradient {
  background: conic-gradient(from 90deg at 50% 50%, #a855f7 0%, #3b82f6 50%, #a855f7 100%);
}

.dark .animated-outline-inner {
  background: oklch(0.15 0 0) !important;
  color: #c084fc !important;
}

.dark [data-slot='button'][class*='animated-outline']:hover .animated-outline-inner {
  background: oklch(0.2 0.02 270) !important;
  color: #e9d5ff !important;
}

.dark .slider-track {
  background: oklch(0.2 0 0);
}

.dark .slider-range {
  background: linear-gradient(to right, #a855f7, #3b82f6);
}

.dark .slider-thumb {
  background: oklch(0.25 0 0);
  border-color: oklch(0.4 0 0);
}

.dark .xml-highlight {
  color: oklch(0.9 0 0); /* Default light text */
}

.dark .xml-tag-bracket {
  color: oklch(0.7 0.12 220); /* Soft blue for < > */
}

.dark .xml-tag-name {
  color: oklch(0.75 0.2 25); /* Coral/salmon for tag names */
}

.dark .xml-attribute-name {
  color: oklch(0.8 0.15 280); /* Light purple for attributes */
}

.dark .xml-attribute-equals {
  color: oklch(0.6 0 0); /* Gray for = */
}

.dark .xml-attribute-value {
  color: oklch(0.8 0.18 145); /* Bright green for strings */
}

.dark .xml-comment {
  color: oklch(0.55 0.05 100); /* Muted for comments */
  font-style: italic;
}

.dark .xml-cdata {
  color: oklch(0.7 0.12 200); /* Teal for CDATA */
}

.dark .xml-doctype {
  color: oklch(0.7 0.15 280); /* Purple for DOCTYPE */
}

.dark .xml-text {
  color: oklch(0.85 0 0); /* Off-white for text */
}