/* OpenMontage Standalone — NEXUS Theme Tokens * Copied verbatim from /opt/biq-nexus/app/src/theme.css (MP-08). * 13 semantic tokens cover surfaces, on-surface text grades, and edges. * Light mode = :root defaults; dark mode applies when .dark class is on . * Update this file when NEXUS theme.css changes; do NOT edit colors inline anywhere else. */ :root { --th-surface: #ffffff; /* white */ --th-surface-alt: #f9fafb; /* gray-50 */ --th-surface-dim: #f3f4f6; /* gray-100 */ --th-surface-hover: #f9fafb; /* gray-50 */ --th-on-surface: #111827; /* gray-900 */ --th-on-surface-strong: #1f2937; /* gray-800 */ --th-on-surface-dim: #374151; /* gray-700 */ --th-on-surface-muted: #4b5563; /* gray-600 */ --th-on-surface-faint: #6b7280; /* gray-500 */ --th-edge: #e5e7eb; /* gray-200 */ --th-edge-strong: #d1d5db; /* gray-300 */ --th-input-text: #111827; /* gray-900 */ --th-placeholder: #9ca3af; /* gray-400 */ --th-shadow-color: rgba(0, 0, 0, 0.1); --th-ring: rgba(0, 0, 0, 0.05); --th-focus-border: #3b82f6; /* blue-500 */ /* Accent palette (status + interaction). Stable across light/dark. */ --th-accent-primary: #4f46e5; /* indigo-600 */ --th-accent-on-primary: #ffffff; --th-accent-success: #10b981; /* emerald-500 */ --th-accent-warn: #f59e0b; /* amber-500 */ --th-accent-danger: #dc2626; /* red-600 */ /* Soft tint backgrounds for badges — same hue as accents at low opacity. */ --th-tint-primary: rgba(79, 70, 229, 0.12); --th-tint-success: rgba(16, 185, 129, 0.12); --th-tint-warn: rgba(245, 158, 11, 0.12); --th-tint-danger: rgba(220, 38, 38, 0.12); --th-overlay: rgba(0, 0, 0, 0.45); /* Media player letterbox — black in both themes is the expected behavior. */ --th-video-bg: #000000; } .dark { --th-surface: #1f2937; /* gray-800 */ --th-surface-alt: #111827; /* gray-900 */ --th-surface-dim: #1f2937; /* gray-800 */ --th-surface-hover: #374151; /* gray-700 */ --th-on-surface: #f9fafb; /* gray-50 */ --th-on-surface-strong: #f3f4f6; /* gray-100 */ --th-on-surface-dim: #e5e7eb; /* gray-200 */ --th-on-surface-muted: #d1d5db; /* gray-300 */ --th-on-surface-faint: #9ca3af; /* gray-400 */ --th-edge: #374151; /* gray-700 */ --th-edge-strong: #4b5563; /* gray-600 */ --th-input-text: #f3f4f6; /* gray-100 */ --th-placeholder: #6b7280; /* gray-500 */ --th-shadow-color: rgba(0, 0, 0, 0.3); --th-ring: rgba(255, 255, 255, 0.1); --th-focus-border: #60a5fa; /* blue-400 — brighter in dark mode */ --th-accent-primary: #6366f1; /* indigo-500 — lighter in dark */ --th-accent-success: #34d399; --th-accent-warn: #fbbf24; --th-accent-danger: #ef4444; /* Soft tints in dark mode — slightly stronger so they show against gray-800 surface. */ --th-tint-primary: rgba(99, 102, 241, 0.20); --th-tint-success: rgba(52, 211, 153, 0.18); --th-tint-warn: rgba(251, 191, 36, 0.18); --th-tint-danger: rgba(239, 68, 68, 0.20); --th-overlay: rgba(0, 0, 0, 0.65); --th-video-bg: #000000; }