:root {
  /* Primary palette - DNA-inspired */
  --color-loom-50: #f5f3ff;
  --color-loom-100: #ede9fe;
  --color-loom-200: #ddd6fe;
  --color-loom-300: #c4b5fd;
  --color-loom-400: #a78bfa;
  --color-loom-500: #8b5cf6;
  --color-loom-600: #7c3aed;
  --color-loom-700: #6d28d9;
  --color-loom-800: #5b21b6;
  --color-loom-900: #4c1d95;
  --color-loom-950: #2e1065;

  /* Organism colors */
  --color-org-human: #3b82f6;
  --color-org-mouse: #22c55e;
  --color-org-rat: #eab308;
  --color-org-zebrafish: #06b6d4;
  --color-org-xenopus: #14b8a6;
  --color-org-fly: #f97316;
  --color-org-worm: #a855f7;
  --color-org-yeast: #ec4899;

  /* Confidence colors.
     high = calm green, moderate = amber, low/unknown = neutral gray.
     Red is reserved for errors only - never for confidence or counts. */
  --color-confidence-high: #10b981;
  --color-confidence-moderate: #f59e0b;
  --color-confidence-low: #71717a;

  /* Radii - every card uses --radius-card, every control --radius-control */
  --radius-card: 12px;
  --radius-control: 8px;
 
  color-scheme: light;

  /* Light mode surfaces */
  --surface-0: #ffffff;
  --surface-1: #fafafa;
  --surface-2: #f4f4f5;
  --surface-3: #e4e4e7;

  /* Light mode text (tertiary is ~4.8:1 on white - it carries content) */
  --text-primary: #18181b;
  --text-secondary: #52525b;
  --text-tertiary: #6b7280;

  /* Light mode borders */
  --border-default: #e4e4e7;
  --border-subtle: #f4f4f5;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-glow: 0 0 20px rgba(139, 92, 246, 0.3);
}
@media (prefers-color-scheme: dark) { :root {
  color-scheme: dark;

  /* Dark mode surfaces */
  --surface-0: #09090b;
  --surface-1: #18181b;
  --surface-2: #27272a;
  --surface-3: #3f3f46;

  /* Dark mode text (tertiary is ~5.3:1 on --surface-1) */
  --text-primary: #fafafa;
  --text-secondary: #a1a1aa;
  --text-tertiary: #8b8b94;

  /* Dark mode borders */
  --border-default: #3f3f46;
  --border-subtle: #27272a;

  /* Dark shadows/glows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
  --shadow-glow: 0 0 30px rgba(139, 92, 246, 0.4);
} }