:root,
.light {
  /* Primary brand colour — buttons, active states, focused rings */
  --primary: 250 37% 52%;
  --primary-foreground: 0 0% 100%;
  --primary-hover: 250 37% 52%;

  /* Focus ring */
  --ring: 250 37% 52%;

  /* Gradient helpers (landing, hero sections) */
  --gradient-primary: 250 37% 60%;
  --gradient-secondary: 249 21% 40%;

  /* Sidebar active item */
  --sidebar-primary: 250 37% 52%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-ring: 250 37% 52%;
}

.dark {
  --primary: 250 37% 52%;
  --primary-foreground: 0 0% 100%;
  --primary-hover: 250 37% 52%;

  --ring: 250 37% 52%;

  --gradient-primary: 250 37% 60%;
  --gradient-secondary: 249 21% 40%;

  --sidebar-primary: 250 37% 52%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-ring: 250 37% 52%;

  /* ── Background ─────────────────────────────────────────────── */
  --background: 212 25% 10%;
  --background-hex: #111c27;

  /* ── Surfaces (cards, popovers, panels) ──────────────────────── */
  /* Cards sit slightly lighter than the background for depth */
  --card: 212 22% 13%;
  --card-background: 212 22% 11%;
  --card-border: 212 18% 22%;
  --card-hover: 212 20% 16%;

  /* Popovers / dropdowns */
  --popover: 212 25% 12%;

  /* ── Interactive surfaces ────────────────────────────────────── */
  /* secondary = button/badge backgrounds */
  --secondary: 212 18% 17%;
  /* muted = subtle section backgrounds */
  --muted: 212 15% 17%;
  /* accent = hover highlight on menu items (shadcn pattern) */
  --accent: 212 18% 15%;

  /* ── Borders & inputs ────────────────────────────────────────── */
  --border: 212 20% 21%;
  --input: 212 20% 24%;

  /* ── Workflow canvas ─────────────────────────────────────────── */
  /* Dots must be LIGHTER than --background (10%) to be visible */
  --workflow-dots: 212 20% 20%;

  /* ── Sidebar ─────────────────────────────────────────────────── */
  --sidebar: 212 28% 8%;
  --sidebar-accent: 212 18% 15%;
  --sidebar-border: 212 25% 13%;
}