/* Shared palette and semantic colors. Tailwind v3.4.17 HEX palette. */
:root {
  --color-slate-500: #64748b;
  --color-slate-400: #94a3b8;
  --color-slate-300: #cbd5e1;
  --color-vision-label: var(--color-slate-400);
  --color-system-showcase-bg: #101b30;
  --color-system-showcase-panel: rgba(255,255,255,.10);
  --color-blue-600: #2563eb;
  --color-hero-progress: var(--color-black);
  --color-hero-progress-start: #60a5fa;
  --color-hero-progress-end: #2563eb;
  --color-hero-reference-blue: #f0f7ff;
  --color-hero-lavender: #f0efff;
  --color-blue-50: #eff6ff;
  --color-blue-100: #dbeafe;
  --color-blue-300: #93c5fd;
  --color-blue-950: #172554;
  --color-system-link: var(--color-blue-300);
  --color-system-panel-bg: var(--color-black);
  --color-system-panel-text: var(--color-white);
  --color-system-divider: color-mix(in srgb, var(--color-white) 20%, transparent);
  --color-system-visual-bg: var(--color-indigo-50);
  --color-header-divider: var(--color-gray-100);
  --color-service-card-bg: var(--color-gray-100);
  --color-service-text: var(--color-indigo-950);
  --color-service-copy: var(--color-gray-600);
  --color-service-object: var(--color-indigo-100);
  --color-indigo-300: #a5b4fc;
  --color-indigo-500: #6366f1;
  --color-service-object-accent: var(--color-indigo-500);
  --color-indigo-900: #312e81;
  --color-indigo-950: #1e1b4b;
  --color-indigo-50: #eef2ff;
  --color-indigo-100: #e0e7ff;
  --color-hero-bg: var(--color-blue-50);
  --color-hero-menu-bg: var(--color-blue-100);
  --color-black: #000000;
  --color-hero-menu-icon-hover: var(--color-black);
  --color-gray-400: #9ca3af;
  --color-text-caption: var(--color-gray-400);
  --color-hero-menu-caption: color-mix(in srgb, var(--color-blue-950) 35%, transparent);
  --color-hero-menu-divider: color-mix(in srgb, var(--color-blue-950) 8%, transparent);
  --color-gray-300: #d1d5db;
  --color-gray-600: #4b5563;
  --color-divider-subtle: var(--color-gray-300);
  --color-icon-secondary: var(--color-gray-600);
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-bg-muted: var(--color-gray-100);
  --color-hero-menu-hover: color-mix(in srgb, var(--color-blue-50) 60%, var(--color-blue-100));
  --color-tag-bg: var(--color-white);
  --color-white: #ffffff;
  --color-hero-cta-hover-bg: var(--color-black);
  --color-hero-cta-hover-text: var(--color-white);
  --color-tag-text: var(--color-black);
  --color-search-placeholder: var(--color-gray-400);
  --color-gray-50: #f9fafb;
  --color-bg-subtle: var(--color-gray-50);
  --color-search-bg: color-mix(in srgb, var(--color-gray-50) 50%, var(--color-gray-100));
}

:root {
  --color-hero-surface: #f2f4f6;
  --color-quick-menu-surface: #e4e8ec;
  --color-quick-menu-hover: #d8dee5;
}
:root { --color-vision-panel-bg: #111827; }
:root {
  --color-vision-card-blue: #23334d;
  --color-vision-card-indigo: #302b49;
  --color-vision-card-slate: #263b42;
  --color-vision-card-dim: rgba(9,15,26,.5);
}