pf_app/ui/src/index.css

@import "tailwindcss";

:root, .light {
  --bg-primary: #f3f4f6;
  --bg-secondary: #ffffff;
  --bg-tertiary: #f9fafb;
  --text-primary: #1f2937;
  --text-secondary: #374151;
  --text-muted: #9ca3af;
  --border-color: #e5e7eb;
  --border-light: #f3f4f6;
  --accent-bg: #eff6ff;
  --accent-text: #1d4ed8;
}

/* Dark palette tuned to Perspective's "Pro Dark" theme:
   bg #242526, tooltip #2a2c2f, gridline #3b3f46, inactive #61656e,
   inactive border #4c505b, active #2770a9, legend #c5c9d0. */
.dark {
  --bg-primary: #242526;
  --bg-secondary: #2a2c2f;
  --bg-tertiary: #3b3f46;
  --text-primary: #ffffff;
  --text-secondary: #c5c9d0;
  --text-muted: #61656e;
  --border-color: #4c505b;
  --border-light: #3b3f46;
  --accent-bg: rgba(39, 113, 170, 0.32);
  --accent-text: #4778c2;
}

body { margin: 0; background-color: var(--bg-primary); color: var(--text-primary); }
#root { height: 100vh; display: flex; }

.dark .bg-white { background-color: var(--bg-secondary); }
.dark .bg-gray-50 { background-color: var(--bg-tertiary); }
/* The opacity variant is its own class and the rule above does not reach it, so
   without this the operation panel's header band stayed light grey in dark mode.
   --bg-tertiary at the same 60%. */
.dark .bg-gray-50\/60 { background-color: rgb(59 63 70 / 0.6); }
.dark .bg-gray-100 { background-color: var(--bg-tertiary); }
.dark .bg-gray-200 { background-color: var(--bg-tertiary); }
.dark .bg-gray-300 { background-color: var(--bg-tertiary); }
/* Toolbar section labels (LAYOUT / ROWS / COLUMNS). Their own class rather than
   a grey utility: in dark mode text-gray-400 and text-gray-500 both collapse to
   --text-muted, so changing the utility would have fixed light mode only. At
   10px/gray-400 these sat near 2.5:1 on white and 2:1 on the dark panel, under
   the 4.5:1 WCAG wants for text this size. */
/* Names the group of controls beside it — Layout, Rows, Columns. Weighted and
   tracked so it reads as a label rather than as another small grey control:
   the toolbar is dense, and at the old weight the labels and the buttons they
   name were the same visual object. */
.pf-section-label {
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #4b5563;
  white-space: nowrap;
}
.dark .pf-section-label { color: #c5c9d0; }

/* The rule between groups inside a zone. Taller and lighter than the old
   `w-px h-4 bg-gray-200`, which was the same weight as the zone borders, so
   the groups within a zone and the zones themselves separated identically. */
.pf-group-rule {
  width: 1px;
  height: 20px;
  flex-shrink: 0;
  background: #b6bcc5;
}
.dark .pf-group-rule { background: #5a616b; }

.dark .text-gray-300 { color: var(--text-muted); }
.dark .text-gray-400 { color: var(--text-muted); }
.dark .text-gray-500 { color: var(--text-muted); }
.dark .text-gray-600 { color: var(--text-secondary); }
.dark .text-gray-700 { color: var(--text-secondary); }
.dark .text-gray-800 { color: var(--text-primary); }
.dark .text-gray-900 { color: var(--text-primary); }
.dark .bg-blue-50 { background-color: var(--accent-bg); }
.dark .bg-blue-100 { background-color: var(--accent-bg); }
.dark .text-blue-600 { color: var(--accent-text); }
.dark .text-blue-700 { color: var(--accent-text); }
.dark .border-blue-300 { border-color: var(--accent-text); }
.dark .hover\:bg-blue-50:hover { background-color: var(--accent-bg); }

/* Status accents — desaturated to sit on Pro Dark's neutral background */
.dark .bg-green-50 { background-color: #1a3d2c; }
.dark .text-green-600 { color: #6ee7b7; }
.dark .text-green-700 { color: #6ee7b7; }
.dark .text-green-400 { color: #6ee7b7; }
.dark .bg-yellow-50 { background-color: #3a2e14; }
.dark .text-yellow-700 { color: #f5c66f; }
.dark .bg-amber-50 { background-color: #3a2e14; }
.dark .border-amber-200 { border-color: #5a4a26; }
.dark .text-amber-700 { color: #f5c66f; }
.dark .text-amber-800 { color: #f5c66f; }
.dark .bg-purple-50 { background-color: #2a1f3d; }
.dark .text-purple-600 { color: #c4a8e8; }
.dark .text-purple-700 { color: #c4a8e8; }
.dark .bg-red-50 { background-color: #3d1f1f; }
.dark .text-red-600 { color: #ff9485; }
.dark .text-red-700 { color: #ff9485; }

.dark .border-gray-100 { border-color: var(--border-light); }
.dark .border-gray-200 { border-color: var(--border-color); }
.dark .border-gray-300 { border-color: var(--border-color); }
.dark .border-blue-100 { border-color: var(--border-color); }
.dark .border-b { border-color: var(--border-color); }
.dark .border-t { border-color: var(--border-color); }
.dark .border-r { border-color: var(--border-color); }
.dark .border-l { border-color: var(--border-color); }
.dark .hover\:bg-gray-50:hover { background-color: var(--bg-tertiary); }
.dark .hover\:bg-gray-100:hover { background-color: var(--bg-tertiary); }
.dark .hover\:bg-gray-200:hover { background-color: var(--bg-tertiary); }
.dark .hover\:text-gray-500:hover { color: var(--text-secondary); }
.dark .hover\:text-gray-600:hover { color: var(--text-secondary); }
.dark .hover\:text-gray-800:hover { color: var(--text-primary); }
.dark .hover\:border-gray-300:hover { border-color: var(--border-color); }
.dark .hover\:border-gray-400:hover { border-color: var(--border-color); }
.dark .focus\:border-gray-300:focus { border-color: var(--border-color); }
.dark ::selection { background-color: var(--accent-bg); color: var(--text-primary); }
.dark input { background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border-color); }
.dark select { background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border-color); }
.dark select option { background-color: var(--bg-secondary); color: var(--text-primary); }
.dark textarea { background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border-color); }
.dark .bg-transparent { background-color: transparent; }